diff --git a/.envrc b/.envrc deleted file mode 100644 index 234188db..00000000 --- a/.envrc +++ /dev/null @@ -1 +0,0 @@ -PATH_add bin diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index e2192c5c..00000000 --- a/.eslintignore +++ /dev/null @@ -1,5 +0,0 @@ -/build/ -/config/ -/dist/ -/*.js -/test/unit/coverage/ diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 00000000..edfacfd1 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,11 @@ +/* eslint-env node */ +require("@rushstack/eslint-patch/modern-module-resolution"); + +module.exports = { + "root": true, + "extends": [ + "plugin:vue/vue3-essential", + "eslint:recommended", + "@vue/eslint-config-typescript/recommended" + ] +} diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 37dd2cd8..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,44 +0,0 @@ -// https://eslint.org/docs/user-guide/configuring - -module.exports = { - root: true, - env: { - 'node': true, - }, - extends: [ - 'plugin:vue/vue3-essential', - '@vue/airbnb', - 'plugin:jest/recommended', - ], - plugins: ['vue'], - parserOptions: { - parser: 'babel-eslint', - }, - // add your custom rules here - rules: { - // disallow reassignment of function parameters - // disallow parameter object manipulation except for specific exclusions - 'no-param-reassign': ['error', { - props: true, - ignorePropertyModificationsFor: [ - 'el', - ] - }], - 'func-names': 'off', - 'no-console': [ - 'warn', - { allow: ['warn', 'error'] }, - ], - // allow debugger during development - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', - 'no-underscore-dangle': [ - 'error', - { - allow: [ - '__vueClickOutside__' - ] - } - ], - 'jest/prefer-to-have-length': 'warn', - }, -} diff --git a/.gitignore b/.gitignore index 56f4deef..c9e1e6ee 100644 --- a/.gitignore +++ b/.gitignore @@ -1,11 +1,30 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules .DS_Store -node_modules/ -npm-debug.log -yarn-error.log -.idea/ -docs/.vuepress/.dist/ -docs/.vuepress/.cache/ -docs/.vuepress/.temp/ -dist/ -dist-modern/ -Icon? +dist +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +Icon** + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/.lintstagedrc.json b/.lintstagedrc.json deleted file mode 100644 index b733c56c..00000000 --- a/.lintstagedrc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "*.{js,vue}": [ - "eslint --quiet --fix", - "git add" - ] -} diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index 6f7f377b..00000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -v16 diff --git a/README.md b/README.md index 4493ed8d..88b0a8fa 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # vue-tel-input + International Telephone Input with Vue. [![](https://img.shields.io/npm/dt/vue-tel-input.svg)](https://www.npmjs.com/package/vue-tel-input) [![](https://img.shields.io/github/stars/iamstevendao/vue-tel-input.svg)](https://github.com/iamstevendao/vue-tel-input) @@ -12,9 +13,10 @@ International Telephone Input with Vue. [Visit the website](https://iamstevendao.github.io/vue-tel-input/) ## Getting started + - Install the plugin: - ``` + ```sh npm install vue-tel-input ``` @@ -39,7 +41,9 @@ International Telephone Input with Vue. ``` ## Installation + ### npm + ```bash npm install vue-tel-input ``` @@ -53,6 +57,7 @@ import 'vue-tel-input/dist/vue-tel-input.css' Vue.use(VueTelInput, options) // Define default global options here (optional) ``` + > View all available options in [Props](https://iamstevendao.github.io/vue-tel-input/documentation/props.html). Or use the component directly: @@ -82,7 +87,7 @@ export default { ``` -** If Vue is detected in the Page, the plugin is installed automatically.** +**If Vue is detected in the Page, the plugin is installed automatically.** ** Otherwise, manually install the plugin into Vue: @@ -90,48 +95,49 @@ export default { Vue.use(window['vue-tel-input']); ``` -### Use as a custom field of [vue-form-generator](https://github.com/vue-generators/vue-form-generator) +## Changelog -- Add a component using `vue-form-generator`'s `abstractField` mixin - ```html - - - - - ``` +[Go to Github Releases](https://github.com/iamstevendao/vue-tel-input/releases) -- Register the new field as a global component - ```js - import Vue from 'vue'; - import TelInput from '/tel-input.vue'; +## Development - Vue.component('field-tel-input', TelInput); - ``` +Clone the project -- Now it can be used as `tel-input` in schema of `vue-form-generator` - ```js - var schema: { - fields: [{ - type: "tel-input", - label: "Awesome (tel input)", - model: "telephone" - }] - }; - ``` -Read more on `vue-form-generator`'s [instruction page](https://icebob.gitbooks.io/vueformgenerator/content/fields/custom_fields.html) +```bash + git clone https://github.com/iamstevendao/vue-tel-input.git +``` +Go to the project directory & checkout the `next` branch -## Changelog -[Go to Github Releases](https://github.com/iamstevendao/vue-tel-input/releases) +```bash + cd vue-tel-input + git checkout next origin/next +``` + +Install dependencies + +```bash + npm install +``` + +Build the project + +```bash + npm run build +``` + +Start the es build example + +```bash + npm run dev +``` + +Start the browser build example + +```bash + npx http-server -p 8080 + # 127.0.0.1:8080/examples/browser.html +``` ## License diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index 757ff9b1..00000000 --- a/babel.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - presets: [ - '@vue/cli-plugin-babel/preset', - ], -}; diff --git a/circle.yml b/circle.yml deleted file mode 100644 index 7607f526..00000000 --- a/circle.yml +++ /dev/null @@ -1,31 +0,0 @@ -version: 2 - -jobs: - build: - docker: - - image: cypress/base:8 - - branches: - ignore: - - gh-pages - - steps: - - checkout - - - restore_cache: - keys: - - v1-dependencies-{{ checksum "package.json" }}-{{ checksum "circle.yml" }} - - - run: - name: Installing dependencies - command: npm install - - - save_cache: - paths: - - node_modules - - ~/.cache - key: v1-dependencies-{{ checksum "package.json" }}-{{ checksum "circle.yml" }} - - - run: - name: Build demo - command: sh demo.sh diff --git a/demo.sh b/demo.sh deleted file mode 100644 index f4027031..00000000 --- a/demo.sh +++ /dev/null @@ -1,24 +0,0 @@ -#!/usr/bin/env sh - -# abort on errors -set -e - -# build -npm run docs:build - -# Copy circle CI configuration to prevent running from gh-pages -cp circle.yml docs/.vuepress/dist - -# navigate into the build output directory -cd docs/.vuepress/dist - -git config --global user.email "$GH_EMAIL" > /dev/null 2>&1 -git config --global user.name "$GH_NAME" > /dev/null 2>&1 - -git init -git add -A -git commit -m "Deploy" - -git push -f git@github.com:iamstevendao/vue-tel-input.git master:gh-pages - -cd - diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js deleted file mode 100644 index be1fc133..00000000 --- a/docs/.vuepress/config.js +++ /dev/null @@ -1,72 +0,0 @@ -module.exports = { - base: '/vue-tel-input/', - locales: { - '/': { - lang: 'en-US', - title: 'Vue Tel Input', - description: 'Documentation site for Vue Tel Input' - } - }, - head: [ - ['link', { rel: "icon", type: "image/png", sizes: "16x16", href: "favicon-16x16.png" }], - ['link', { rel: "icon", type: "image/png", sizes: "32x32", href: "favicon-32x32.png" }], - ], - themeConfig: { - repo: '', - docsDir: 'docs', - search: false, - displayAllHeaders: true, - locales: { - '/': { - label: 'English', - selectText: 'Languages', - lastUpdated: 'Last Updated', - // service worker is configured but will only register in production - serviceWorker: { - updatePopup: { - message: 'New content is available.', - buttonText: 'Refresh' - } - }, - nav: [ - { text: 'Documentation', link: '/documentation/' }, - { text: 'Sponsor', link: 'https://github.com/sponsors/iamstevendao' }, - { text: 'Changelog', link: 'https://github.com/iamstevendao/vue-tel-input/releases' }, - { text: 'GitHub', link: 'https://github.com/iamstevendao/vue-tel-input' } - ], - sidebar: { - '/documentation/': [ - { - title: 'Guide', - collapsable: false, - children: [ - 'getting-started', - 'installation' - ] - }, - { - title: 'Usage', - collapsable: false, - children: [ - 'props', - 'events', - 'slots', - 'custom-form-of-vue-form-generator' - ] - }, - { - title: 'Others', - collapsable: false, - children: [ - 'typescript-support', - 'v3', - 'v2', - 'credits', - ] - } - ] - } - } - } - } -} diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js deleted file mode 100644 index 17cb5742..00000000 --- a/docs/.vuepress/enhanceApp.js +++ /dev/null @@ -1,8 +0,0 @@ -// enhanceApp.js - -import VueTelInput from '../../src/index.js'; - -export default ({ Vue, options }) => { - Vue.use(VueTelInput); - Vue.config.productionTip = false; -} diff --git a/docs/.vuepress/public/favicon-16x16.png b/docs/.vuepress/public/favicon-16x16.png deleted file mode 100644 index 8a6e7164..00000000 Binary files a/docs/.vuepress/public/favicon-16x16.png and /dev/null differ diff --git a/docs/.vuepress/public/favicon-32x32.png b/docs/.vuepress/public/favicon-32x32.png deleted file mode 100644 index 10f2f213..00000000 Binary files a/docs/.vuepress/public/favicon-32x32.png and /dev/null differ diff --git a/docs/.vuepress/public/hero.png b/docs/.vuepress/public/hero.png deleted file mode 100644 index 3edf68a9..00000000 Binary files a/docs/.vuepress/public/hero.png and /dev/null differ diff --git a/docs/.vuepress/theme/components/FormInput.vue b/docs/.vuepress/theme/components/FormInput.vue deleted file mode 100644 index e0da0aca..00000000 --- a/docs/.vuepress/theme/components/FormInput.vue +++ /dev/null @@ -1,99 +0,0 @@ - - - - - diff --git a/docs/.vuepress/theme/components/Home.vue b/docs/.vuepress/theme/components/Home.vue deleted file mode 100644 index 4bbcf29a..00000000 --- a/docs/.vuepress/theme/components/Home.vue +++ /dev/null @@ -1,255 +0,0 @@ - - - - - diff --git a/docs/.vuepress/theme/components/PageProps.vue b/docs/.vuepress/theme/components/PageProps.vue deleted file mode 100644 index 701e4710..00000000 --- a/docs/.vuepress/theme/components/PageProps.vue +++ /dev/null @@ -1,83 +0,0 @@ - - - - - diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js deleted file mode 100644 index b91b8a57..00000000 --- a/docs/.vuepress/theme/index.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - extend: '@vuepress/theme-default' -} diff --git a/docs/.vuepress/theme/layouts/LayoutProps.vue b/docs/.vuepress/theme/layouts/LayoutProps.vue deleted file mode 100644 index 635c6292..00000000 --- a/docs/.vuepress/theme/layouts/LayoutProps.vue +++ /dev/null @@ -1,137 +0,0 @@ - - - diff --git a/docs/.vuepress/theme/styles/wrapper.styl b/docs/.vuepress/theme/styles/wrapper.styl deleted file mode 100644 index c560eb71..00000000 --- a/docs/.vuepress/theme/styles/wrapper.styl +++ /dev/null @@ -1,8 +0,0 @@ -$wrapper - max-width $contentWidth - margin 0 auto - padding 2rem 2.5rem - @media (max-width: $MQNarrow) - padding 2rem - @media (max-width: $MQMobileNarrow) - padding 1.5rem diff --git a/docs/.vuepress/theme/util.js b/docs/.vuepress/theme/util.js deleted file mode 100644 index 71ff26f8..00000000 --- a/docs/.vuepress/theme/util.js +++ /dev/null @@ -1,244 +0,0 @@ -export const hashRE = /#.*$/ -export const extRE = /\.(md|html)$/ -export const endingSlashRE = /\/$/ -export const outboundRE = /^[a-z]+:/i - -export function normalize(path) { - return decodeURI(path) - .replace(hashRE, '') - .replace(extRE, '') -} - -export function getHash(path) { - const match = path.match(hashRE) - if (match) { - return match[0] - } -} - -export function isExternal(path) { - return outboundRE.test(path) -} - -export function isMailto(path) { - return /^mailto:/.test(path) -} - -export function isTel(path) { - return /^tel:/.test(path) -} - -export function ensureExt(path) { - if (isExternal(path)) { - return path - } - const hashMatch = path.match(hashRE) - const hash = hashMatch ? hashMatch[0] : '' - const normalized = normalize(path) - - if (endingSlashRE.test(normalized)) { - return path - } - return normalized + '.html' + hash -} - -export function isActive(route, path) { - const routeHash = decodeURIComponent(route.hash) - const linkHash = getHash(path) - if (linkHash && routeHash !== linkHash) { - return false - } - const routePath = normalize(route.path) - const pagePath = normalize(path) - return routePath === pagePath -} - -export function resolvePage(pages, rawPath, base) { - if (isExternal(rawPath)) { - return { - type: 'external', - path: rawPath - } - } - if (base) { - rawPath = resolvePath(rawPath, base) - } - const path = normalize(rawPath) - for (let i = 0; i < pages.length; i++) { - if (normalize(pages[i].regularPath) === path) { - return Object.assign({}, pages[i], { - type: 'page', - path: ensureExt(pages[i].path) - }) - } - } - console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`) - return {} -} - -function resolvePath(relative, base, append) { - const firstChar = relative.charAt(0) - if (firstChar === '/') { - return relative - } - - if (firstChar === '?' || firstChar === '#') { - return base + relative - } - - const stack = base.split('/') - - // remove trailing segment if: - // - not appending - // - appending to trailing slash (last segment is empty) - if (!append || !stack[stack.length - 1]) { - stack.pop() - } - - // resolve relative path - const segments = relative.replace(/^\//, '').split('/') - for (let i = 0; i < segments.length; i++) { - const segment = segments[i] - if (segment === '..') { - stack.pop() - } else if (segment !== '.') { - stack.push(segment) - } - } - - // ensure leading slash - if (stack[0] !== '') { - stack.unshift('') - } - - return stack.join('/') -} - -/** - * @param { Page } page - * @param { string } regularPath - * @param { SiteData } site - * @param { string } localePath - * @returns { SidebarGroup } - */ -export function resolveSidebarItems(page, regularPath, site, localePath) { - const { pages, themeConfig } = site - - const localeConfig = localePath && themeConfig.locales - ? themeConfig.locales[localePath] || themeConfig - : themeConfig - - const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar - if (pageSidebarConfig === 'auto') { - return resolveHeaders(page) - } - - const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar - if (!sidebarConfig) { - return [] - } else { - const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig) - if (config === 'auto') { - return resolveHeaders(page) - } - return config - ? config.map(item => resolveItem(item, pages, base)) - : [] - } -} - -/** - * @param { Page } page - * @returns { SidebarGroup } - */ -function resolveHeaders(page) { - const headers = groupHeaders(page.headers || []) - return [{ - type: 'group', - collapsable: false, - title: page.title, - path: null, - children: headers.map(h => ({ - type: 'auto', - title: h.title, - basePath: page.path, - path: page.path + '#' + h.slug, - children: h.children || [] - })) - }] -} - -export function groupHeaders(headers) { - // group h3s under h2 - headers = headers.map(h => Object.assign({}, h)) - let lastH2 - headers.forEach(h => { - if (h.level === 2) { - lastH2 = h - } else if (lastH2) { - (lastH2.children || (lastH2.children = [])).push(h) - } - }) - return headers.filter(h => h.level === 2) -} - -export function resolveNavLinkItem(linkItem) { - return Object.assign(linkItem, { - type: linkItem.items && linkItem.items.length ? 'links' : 'link' - }) -} - -/** - * @param { Route } route - * @param { Array | Array | [link: string]: SidebarConfig } config - * @returns { base: string, config: SidebarConfig } - */ -export function resolveMatchingConfig(regularPath, config) { - if (Array.isArray(config)) { - return { - base: '/', - config: config - } - } - for (const base in config) { - if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) { - return { - base, - config: config[base] - } - } - } - return {} -} - -function ensureEndingSlash(path) { - return /(\.html|\/)$/.test(path) - ? path - : path + '/' -} - -function resolveItem(item, pages, base, groupDepth = 1) { - if (typeof item === 'string') { - return resolvePage(pages, item, base) - } else if (Array.isArray(item)) { - return Object.assign(resolvePage(pages, item[0], base), { - title: item[1] - }) - } else { - const children = item.children || [] - if (children.length === 0 && item.path) { - return Object.assign(resolvePage(pages, item.path, base), { - title: item.title - }) - } - return { - type: 'group', - path: item.path, - title: item.title, - sidebarDepth: item.sidebarDepth, - initialOpenGroupIndex: item.initialOpenGroupIndex, - children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)), - collapsable: item.collapsable !== false - } - } -} diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 2767d463..00000000 --- a/docs/README.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -home: true -layout: Home ---- diff --git a/docs/documentation/README.md b/docs/documentation/README.md deleted file mode 100644 index c733d9bb..00000000 --- a/docs/documentation/README.md +++ /dev/null @@ -1,27 +0,0 @@ -# Getting Started - -- Install the plugin: - - ``` - npm install vue-tel-input - ``` - -- Add the plugin into your app: - - ```javascript - import Vue from 'vue' - import VueTelInput from 'vue-tel-input' - import 'vue-tel-input/dist/vue-tel-input.css' - - Vue.use(VueTelInput) - ``` - - [More info on installation](/vue-tel-input/documentation/installation) - -- Use the `vue-tel-input` component: - - ```html -