├── .gitignore ├── .eslintignore ├── examples ├── webpack-example │ ├── static │ │ └── .gitkeep │ ├── .gitignore │ ├── config │ │ ├── prod.env.js │ │ ├── dev.env.js │ │ └── index.js │ ├── .editorconfig │ ├── .babelrc │ ├── index.html │ ├── build │ │ ├── dev-client.js │ │ ├── build.js │ │ ├── check-versions.js │ │ ├── webpack.dev.conf.js │ │ ├── utils.js │ │ ├── dev-server.js │ │ ├── webpack.base.conf.js │ │ └── webpack.prod.conf.js │ ├── src │ │ ├── main.js │ │ └── App.vue │ ├── README.md │ └── package.json ├── .DS_Store └── browser │ └── example.html ├── docs ├── .DS_Store ├── static │ ├── fonts │ │ ├── element-icons.a61be9c.eot │ │ └── element-icons.b02bdc1.ttf │ ├── js │ │ ├── manifest.f9bd485cbcee1e91d218.js │ │ ├── manifest.f9bd485cbcee1e91d218.js.map │ │ └── prism.js │ ├── css │ │ └── prism.css │ └── img │ │ └── element-icons.09162bc.svg └── index.html ├── .babelrc ├── index.js ├── .eslintrc.js ├── config ├── webpack.config.dev.js ├── webpack.config.common.js ├── webpack.config.browser.js └── webpack.config.base.js ├── src ├── index.js └── components │ └── VueInstant.vue ├── CONTRIBUTING.md ├── LICENSE ├── npm-debug.log ├── README.md ├── package.json ├── CODE_OF_CONDUCT.md └── dist ├── vue-instant.common.js ├── vue-instant.browser.js └── vue-instant.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /examples/webpack-example/static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santiblanko/vue-instant/HEAD/docs/.DS_Store -------------------------------------------------------------------------------- /examples/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santiblanko/vue-instant/HEAD/examples/.DS_Store -------------------------------------------------------------------------------- /examples/webpack-example/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /examples/webpack-example/config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }], 4 | "stage-0" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | export default from './dist/vue-instant.common' 2 | export * from './dist/vue-instant.common' 3 | import './dist/vue-instant.css' 4 | -------------------------------------------------------------------------------- /docs/static/fonts/element-icons.a61be9c.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santiblanko/vue-instant/HEAD/docs/static/fonts/element-icons.a61be9c.eot -------------------------------------------------------------------------------- /docs/static/fonts/element-icons.b02bdc1.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/santiblanko/vue-instant/HEAD/docs/static/fonts/element-icons.b02bdc1.ttf -------------------------------------------------------------------------------- /examples/webpack-example/config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /examples/webpack-example/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /examples/webpack-example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false, 5 | "env": { 6 | "test": { 7 | "plugins": [ "istanbul" ] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/webpack-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | webpack-example 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/webpack-example/build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /examples/webpack-example/src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | /* eslint-disable no-new */ 7 | new Vue({ 8 | el: '#app', 9 | template: '', 10 | components: { App } 11 | }) 12 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | env: { 14 | browser: true, 15 | }, 16 | // add your custom rules here 17 | 'rules': { 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/webpack-example/README.md: -------------------------------------------------------------------------------- 1 | # webpack-example 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /config/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var base = require('./webpack.config.base') 3 | var path = require('path') 4 | var distDir = path.join(__dirname, '../dist') 5 | 6 | var outputFile = 'vue-instant' 7 | var globalName = 'VueInstant' 8 | 9 | module.exports = merge(base, { 10 | output: { 11 | path: distDir, 12 | filename: outputFile + '.common.js', 13 | library: globalName, 14 | libraryTarget: 'umd', 15 | }, 16 | devtool: 'eval-source-map', 17 | }) 18 | -------------------------------------------------------------------------------- /config/webpack.config.common.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var merge = require('webpack-merge') 3 | var base = require('./webpack.config.base') 4 | var path = require('path') 5 | var distDir = path.join(__dirname, '../dist') 6 | 7 | var outputFile = 'vue-instant' 8 | var globalName = 'VueInstant' 9 | 10 | module.exports = merge(base, { 11 | output: { 12 | path: distDir, 13 | filename: outputFile + '.common.js', 14 | library: 'vue-instant', 15 | libraryTarget: 'commonjs2', 16 | }, 17 | target: 'node', 18 | externals: { 19 | vue: 'vue', 20 | 'vue-clickaway': 'vue-clickaway' // use package (?) 21 | }, 22 | plugins: [ 23 | new webpack.optimize.UglifyJsPlugin({ 24 | compress: { 25 | warnings: true, 26 | }, 27 | mangle: false, 28 | }), 29 | ], 30 | }) 31 | -------------------------------------------------------------------------------- /docs/static/js/manifest.f9bd485cbcee1e91d218.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n=window.webpackJsonp;window.webpackJsonp=function(c,o){for(var p,s,l=0,i=[];lVue Instant
11 | -------------------------------------------------------------------------------- /config/webpack.config.base.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 3 | 4 | var outputFile = 'vue-instant' 5 | var globalName = 'VueInstant' 6 | 7 | var config = require('../package.json') 8 | 9 | module.exports = { 10 | entry: './src/index.js', 11 | module: { 12 | rules: [ 13 | /* { 14 | enforce: 'pre', 15 | test: /\.(js|vue)$/, 16 | loader: 'eslint-loader', 17 | exclude: /node_modules/, 18 | }, */ 19 | { 20 | test: /.js$/, 21 | use: 'babel-loader', 22 | }, 23 | { 24 | test: /\.vue$/, 25 | loader: 'vue-loader', 26 | options: { 27 | loaders: { 28 | css: ExtractTextPlugin.extract('css-loader'), 29 | }, 30 | }, 31 | }, 32 | ], 33 | }, 34 | plugins: [ 35 | new webpack.DefinePlugin({ 36 | 'VERSION': JSON.stringify(config.version), 37 | }), 38 | new ExtractTextPlugin(outputFile + '.css'), 39 | ], 40 | } 41 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 11 | build. 12 | 2. Update the README.md with details of changes to the interface, this includes new environment 13 | variables, exposed ports, useful file locations and container parameters. 14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this 15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 17 | do not have permission to do that, you may request the second reviewer to merge it for you. 18 | -------------------------------------------------------------------------------- /examples/webpack-example/build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('./check-versions')() 3 | require('shelljs/global') 4 | env.NODE_ENV = 'production' 5 | 6 | var path = require('path') 7 | var config = require('../config') 8 | var ora = require('ora') 9 | var webpack = require('webpack') 10 | var webpackConfig = require('./webpack.prod.conf') 11 | 12 | console.log( 13 | ' Tip:\n' + 14 | ' Built files are meant to be served over an HTTP server.\n' + 15 | ' Opening index.html over file:// won\'t work.\n' 16 | ) 17 | 18 | var spinner = ora('building for production...') 19 | spinner.start() 20 | 21 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 22 | rm('-rf', assetsPath) 23 | mkdir('-p', assetsPath) 24 | cp('-R', 'static/*', assetsPath) 25 | 26 | webpack(webpackConfig, function (err, stats) { 27 | spinner.stop() 28 | if (err) throw err 29 | process.stdout.write(stats.toString({ 30 | colors: true, 31 | modules: false, 32 | children: false, 33 | chunks: false, 34 | chunkModules: false 35 | }) + '\n') 36 | }) 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Santiago Blanco 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/webpack-example/config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/webpack-example/build/check-versions.js: -------------------------------------------------------------------------------- 1 | var semver = require('semver') 2 | var chalk = require('chalk') 3 | var packageConfig = require('../package.json') 4 | var exec = function (cmd) { 5 | return require('child_process') 6 | .execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | { 16 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var i = 0; i < warnings.length; i++) { 39 | var warning = warnings[i] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/webpack-example/build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var config = require('../config') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge') 4 | var utils = require('./utils') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrors = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // eval-source-map is faster for development 19 | devtool: '#eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.optimize.OccurrenceOrderPlugin(), 26 | new webpack.HotModuleReplacementPlugin(), 27 | new webpack.NoErrorsPlugin(), 28 | // https://github.com/ampedandwired/html-webpack-plugin 29 | new HtmlWebpackPlugin({ 30 | filename: 'index.html', 31 | template: 'index.html', 32 | inject: true 33 | }), 34 | new FriendlyErrors() 35 | ] 36 | }) 37 | -------------------------------------------------------------------------------- /examples/webpack-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-example", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "santiago ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.15.3", 13 | "vue": "^2.1.0", 14 | "vue-instant": "0.0.12" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^6.4.0", 18 | "babel-core": "^6.0.0", 19 | "babel-loader": "^6.0.0", 20 | "babel-plugin-transform-runtime": "^6.0.0", 21 | "babel-preset-es2015": "^6.0.0", 22 | "babel-preset-stage-2": "^6.0.0", 23 | "babel-register": "^6.0.0", 24 | "chalk": "^1.1.3", 25 | "connect-history-api-fallback": "^1.1.0", 26 | "css-loader": "^0.25.0", 27 | "eventsource-polyfill": "^0.9.6", 28 | "express": "^4.13.3", 29 | "extract-text-webpack-plugin": "^1.0.1", 30 | "file-loader": "^0.9.0", 31 | "friendly-errors-webpack-plugin": "^1.1.2", 32 | "function-bind": "^1.0.2", 33 | "html-webpack-plugin": "^2.8.1", 34 | "http-proxy-middleware": "^0.17.2", 35 | "json-loader": "^0.5.4", 36 | "semver": "^5.3.0", 37 | "opn": "^4.0.2", 38 | "ora": "^0.3.0", 39 | "shelljs": "^0.7.4", 40 | "url-loader": "^0.5.7", 41 | "vue-loader": "^10.0.0", 42 | "vue-style-loader": "^1.0.0", 43 | "vue-template-compiler": "^2.1.0", 44 | "webpack": "^1.13.2", 45 | "webpack-dev-middleware": "^1.8.3", 46 | "webpack-hot-middleware": "^2.12.2", 47 | "webpack-merge": "^0.14.1" 48 | }, 49 | "engines": { 50 | "node": ">= 4.0.0", 51 | "npm": ">= 3.0.0" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /npm-debug.log: -------------------------------------------------------------------------------- 1 | 0 info it worked if it ends with ok 2 | 1 verbose cli [ '/Users/santiago/.nvm/versions/node/v6.9.2/bin/node', 3 | 1 verbose cli '/Users/santiago/.nvm/versions/node/v6.9.2/bin/npm', 4 | 1 verbose cli 'version', 5 | 1 verbose cli '1.0.2' ] 6 | 2 info using npm@3.10.9 7 | 3 info using node@v6.9.2 8 | 4 info git [ 'status', '--porcelain' ] 9 | 5 verbose stack Error: Git working directory not clean. 10 | 5 verbose stack M dist/vue-instant.browser.js 11 | 5 verbose stack M dist/vue-instant.common.js 12 | 5 verbose stack M npm-debug.log 13 | 5 verbose stack M package.json 14 | 5 verbose stack M src/components/VueInstant.vue 15 | 5 verbose stack at /Users/santiago/.nvm/versions/node/v6.9.2/lib/node_modules/npm/lib/version.js:247:19 16 | 5 verbose stack at /Users/santiago/.nvm/versions/node/v6.9.2/lib/node_modules/npm/lib/utils/no-progress-while-running.js:21:8 17 | 5 verbose stack at ChildProcess.exithandler (child_process.js:197:7) 18 | 5 verbose stack at emitTwo (events.js:106:13) 19 | 5 verbose stack at ChildProcess.emit (events.js:191:7) 20 | 5 verbose stack at maybeClose (internal/child_process.js:877:16) 21 | 5 verbose stack at Socket. (internal/child_process.js:334:11) 22 | 5 verbose stack at emitOne (events.js:96:13) 23 | 5 verbose stack at Socket.emit (events.js:188:7) 24 | 5 verbose stack at Pipe._handle.close [as _onclose] (net.js:498:12) 25 | 6 verbose cwd /Users/santiago/Desktop/lol/vue-instant 26 | 7 error Darwin 15.6.0 27 | 8 error argv "/Users/santiago/.nvm/versions/node/v6.9.2/bin/node" "/Users/santiago/.nvm/versions/node/v6.9.2/bin/npm" "version" "1.0.2" 28 | 9 error node v6.9.2 29 | 10 error npm v3.10.9 30 | 11 error Git working directory not clean. 31 | 11 error M dist/vue-instant.browser.js 32 | 11 error M dist/vue-instant.common.js 33 | 11 error M npm-debug.log 34 | 11 error M package.json 35 | 11 error M src/components/VueInstant.vue 36 | 12 error If you need help, you may report this error at: 37 | 12 error 38 | 13 verbose exit [ 1, true ] 39 | -------------------------------------------------------------------------------- /examples/webpack-example/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 67 | 68 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Instant! 2 | 3 | [![npm](https://img.shields.io/npm/v/vue-instant.svg) ![npm](https://img.shields.io/npm/dm/vue-instant.svg)](https://www.npmjs.com/package/vue-instant) 4 | [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) 5 | 6 | vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. 7 | 8 | [![header](http://g.recordit.co/Yeg0Bl0nJO.gif)](https://santiblanko.github.io/vue-instant/) 9 | 10 | If this implementation looks great you can share a beer using [patreon](https://patreon.com/santiblanko?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator) or send me bitcoins. 11 | 12 | ## Donations 13 | Share a coffee if this project help you. 14 | ### Bitcoin direction: 15 | 31p39e3AtdEv8T2aU9y9D1XH9Wc5HEtRte 16 | 17 | I will be enormously grateful. :) Also I am available for courses and projects!! 18 | Whatsapp :) +573233729549 19 | 20 | 21 | ## Table of contents 22 | 23 | - [Examples](#examples) 24 | - [Installation](#installation) 25 | 26 | # Examples 27 | 28 | Project page 29 | 30 | https://santiblanko.github.io/vue-instant 31 | 32 | Fiddle with all attributes and events 33 | 34 | https://jsfiddle.net/santiblanko/dqo6vr57 35 | 36 | If you need a example using webpack see the example folder. 37 | 38 | # Installation 39 | 40 | ``` 41 | npm install --save vue-instant 42 | ``` 43 | 44 | ## Default import 45 | If you need more details see the examples folder. 46 | 47 | Install all the components: 48 | 49 | ```javascript 50 | import Vue from 'vue' 51 | import 'vue-instant/dist/vue-instant.css' 52 | import VueInstant from 'vue-instant' 53 | Vue.use(VueInstant) 54 | ``` 55 | **⚠️ You need to configure your bundler to compile `.vue` files.** More info [in the official documentation](https://vuejs.org/v2/guide/single-file-components.html). 56 | 57 | ## Browser 58 | If you need more details see the examples folder. 59 | 60 | ```html 61 | 62 | 63 | 64 | 65 | 66 | ``` 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /examples/webpack-example/build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | // generate loader string to be used with extract text plugin 15 | function generateLoaders (loaders) { 16 | var sourceLoader = loaders.map(function (loader) { 17 | var extraParamChar 18 | if (/\?/.test(loader)) { 19 | loader = loader.replace(/\?/, '-loader?') 20 | extraParamChar = '&' 21 | } else { 22 | loader = loader + '-loader' 23 | extraParamChar = '?' 24 | } 25 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 26 | }).join('!') 27 | 28 | // Extract CSS when that option is specified 29 | // (which is the case during production build) 30 | if (options.extract) { 31 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 32 | } else { 33 | return ['vue-style-loader', sourceLoader].join('!') 34 | } 35 | } 36 | 37 | // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 38 | return { 39 | css: generateLoaders(['css']), 40 | postcss: generateLoaders(['css']), 41 | less: generateLoaders(['css', 'less']), 42 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 43 | scss: generateLoaders(['css', 'sass']), 44 | stylus: generateLoaders(['css', 'stylus']), 45 | styl: generateLoaders(['css', 'stylus']) 46 | } 47 | } 48 | 49 | // Generate loaders for standalone style files (outside of .vue) 50 | exports.styleLoaders = function (options) { 51 | var output = [] 52 | var loaders = exports.cssLoaders(options) 53 | for (var extension in loaders) { 54 | var loader = loaders[extension] 55 | output.push({ 56 | test: new RegExp('\\.' + extension + '$'), 57 | loader: loader 58 | }) 59 | } 60 | return output 61 | } 62 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-instant", 3 | "description": "vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 application.", 4 | "version": "1.0.4", 5 | "author": { 6 | "name": "santiago", 7 | "email": "santiago.blanco.vilchez@gmail.com" 8 | }, 9 | "keywords": [ 10 | "vue", 11 | "vuejs", 12 | "plugin", 13 | "autocomplete", 14 | "autosuggest", 15 | "instant search", 16 | "instant", 17 | "searchbox", 18 | "component" 19 | ], 20 | "license": "MIT", 21 | "main": "dist/vue-instant.common.js", 22 | "unpkg": "dist/vue-instant.browser.js", 23 | "scripts": { 24 | "dev": "cross-env NODE_ENV=development webpack --config config/webpack.config.dev.js --progress --watch", 25 | "build": "npm run build:browser && npm run build:common", 26 | "build:browser": "cross-env NODE_ENV=production webpack --config config/webpack.config.browser.js --progress --hide-modules", 27 | "build:common": "cross-env NODE_ENV=production webpack --config config/webpack.config.common.js --progress --hide-modules", 28 | "prepublish": "npm run build" 29 | }, 30 | "repository": { 31 | "type": "git", 32 | "url": "git+https://github.com/santiblanko/vue-instant.git" 33 | }, 34 | "bugs": { 35 | "url": "https://github.com/santiblanko/vue-instant/issues" 36 | }, 37 | "homepage": "https://github.com/santiblanko/vue-instant#readme", 38 | "devDependencies": { 39 | "babel-core": "^6.0.0", 40 | "babel-eslint": "^7.1.1", 41 | "babel-loader": "^6.0.0", 42 | "babel-preset-es2015": "^6.14.0", 43 | "babel-preset-stage-0": "^6.16.0", 44 | "cross-env": "^3.1.3", 45 | "css-loader": "^0.26.1", 46 | "eslint": "^3.12.1", 47 | "eslint-config-standard": "^6.2.1", 48 | "eslint-loader": "^1.6.1", 49 | "eslint-plugin-html": "^1.6.0", 50 | "eslint-plugin-promise": "^3.4.0", 51 | "eslint-plugin-standard": "^2.0.1", 52 | "extract-text-webpack-plugin": "^2.0.0-beta.4", 53 | "vue-loader": "^10.0.0", 54 | "vue-template-compiler": "^2.1.6", 55 | "webpack": "^2.1.0-beta.28", 56 | "webpack-merge": "^1.1.2" 57 | }, 58 | "dependencies": { 59 | "vue": "^2.1.8", 60 | "vue-clickaway": "2.1.0" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /examples/webpack-example/build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | var config = require('../config') 3 | if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 4 | var path = require('path') 5 | var express = require('express') 6 | var webpack = require('webpack') 7 | var opn = require('opn') 8 | var proxyMiddleware = require('http-proxy-middleware') 9 | var webpackConfig = require('./webpack.dev.conf') 10 | 11 | // default port where dev server listens for incoming traffic 12 | var port = process.env.PORT || config.dev.port 13 | // Define HTTP proxies to your custom API backend 14 | // https://github.com/chimurai/http-proxy-middleware 15 | var proxyTable = config.dev.proxyTable 16 | 17 | var app = express() 18 | var compiler = webpack(webpackConfig) 19 | 20 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 21 | publicPath: webpackConfig.output.publicPath, 22 | quiet: true 23 | }) 24 | 25 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 26 | log: () => {} 27 | }) 28 | // force page reload when html-webpack-plugin template changes 29 | compiler.plugin('compilation', function (compilation) { 30 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 31 | hotMiddleware.publish({ action: 'reload' }) 32 | cb() 33 | }) 34 | }) 35 | 36 | // proxy api requests 37 | Object.keys(proxyTable).forEach(function (context) { 38 | var options = proxyTable[context] 39 | if (typeof options === 'string') { 40 | options = { target: options } 41 | } 42 | app.use(proxyMiddleware(context, options)) 43 | }) 44 | 45 | // handle fallback for HTML5 history API 46 | app.use(require('connect-history-api-fallback')()) 47 | 48 | // serve webpack bundle output 49 | app.use(devMiddleware) 50 | 51 | // enable hot-reload and state-preserving 52 | // compilation error display 53 | app.use(hotMiddleware) 54 | 55 | // serve pure static assets 56 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 57 | app.use(staticPath, express.static('./static')) 58 | 59 | var uri = 'http://localhost:' + port 60 | 61 | devMiddleware.waitUntilValid(function () { 62 | console.log('> Listening at ' + uri + '\n') 63 | }) 64 | 65 | module.exports = app.listen(port, function (err) { 66 | if (err) { 67 | console.log(err) 68 | return 69 | } 70 | 71 | // when env is testing, don't need open it 72 | if (process.env.NODE_ENV !== 'testing') { 73 | opn(uri) 74 | } 75 | }) 76 | -------------------------------------------------------------------------------- /examples/webpack-example/build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var projectRoot = path.resolve(__dirname, '../') 5 | 6 | var env = process.env.NODE_ENV 7 | // check env & config/index.js to decide whether to enable CSS source maps for the 8 | // various preprocessor loaders added to vue-loader at the end of this file 9 | var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) 10 | var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) 11 | var useCssSourceMap = cssSourceMapDev || cssSourceMapProd 12 | 13 | module.exports = { 14 | entry: { 15 | app: './src/main.js' 16 | }, 17 | output: { 18 | path: config.build.assetsRoot, 19 | publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 20 | filename: '[name].js' 21 | }, 22 | resolve: { 23 | extensions: ['', '.js', '.vue', '.json'], 24 | fallback: [path.join(__dirname, '../node_modules')], 25 | alias: { 26 | 'vue$': 'vue/dist/vue.common.js', 27 | 'src': path.resolve(__dirname, '../src'), 28 | 'assets': path.resolve(__dirname, '../src/assets'), 29 | 'components': path.resolve(__dirname, '../src/components') 30 | } 31 | }, 32 | resolveLoader: { 33 | fallback: [path.join(__dirname, '../node_modules')] 34 | }, 35 | module: { 36 | loaders: [ 37 | { 38 | test: /\.vue$/, 39 | loader: 'vue' 40 | }, 41 | { 42 | test: /\.js$/, 43 | loader: 'babel', 44 | include: [ 45 | path.join(projectRoot, 'src') 46 | ], 47 | exclude: /node_modules/ 48 | }, 49 | { 50 | test: /\.json$/, 51 | loader: 'json' 52 | }, 53 | { 54 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 55 | loader: 'url', 56 | query: { 57 | limit: 10000, 58 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 59 | } 60 | }, 61 | { 62 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 63 | loader: 'url', 64 | query: { 65 | limit: 10000, 66 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 67 | } 68 | } 69 | ] 70 | }, 71 | vue: { 72 | loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), 73 | postcss: [ 74 | require('autoprefixer')({ 75 | browsers: ['last 2 versions'] 76 | }) 77 | ] 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /examples/browser/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at santiago.blanco.vilchez@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /examples/webpack-example/build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var env = config.build.env 10 | 11 | var webpackConfig = merge(baseWebpackConfig, { 12 | module: { 13 | loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) 14 | }, 15 | devtool: config.build.productionSourceMap ? '#source-map' : false, 16 | output: { 17 | path: config.build.assetsRoot, 18 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 19 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 20 | }, 21 | vue: { 22 | loaders: utils.cssLoaders({ 23 | sourceMap: config.build.productionSourceMap, 24 | extract: true 25 | }) 26 | }, 27 | plugins: [ 28 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 29 | new webpack.DefinePlugin({ 30 | 'process.env': env 31 | }), 32 | new webpack.optimize.UglifyJsPlugin({ 33 | compress: { 34 | warnings: false 35 | } 36 | }), 37 | new webpack.optimize.OccurrenceOrderPlugin(), 38 | // extract css into its own file 39 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), 40 | // generate dist index.html with correct asset hash for caching. 41 | // you can customize output by editing /index.html 42 | // see https://github.com/ampedandwired/html-webpack-plugin 43 | new HtmlWebpackPlugin({ 44 | filename: config.build.index, 45 | template: 'index.html', 46 | inject: true, 47 | minify: { 48 | removeComments: true, 49 | collapseWhitespace: true, 50 | removeAttributeQuotes: true 51 | // more options: 52 | // https://github.com/kangax/html-minifier#options-quick-reference 53 | }, 54 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 55 | chunksSortMode: 'dependency' 56 | }), 57 | // split vendor js into its own file 58 | new webpack.optimize.CommonsChunkPlugin({ 59 | name: 'vendor', 60 | minChunks: function (module, count) { 61 | // any required modules inside node_modules are extracted to vendor 62 | return ( 63 | module.resource && 64 | /\.js$/.test(module.resource) && 65 | module.resource.indexOf( 66 | path.join(__dirname, '../node_modules') 67 | ) === 0 68 | ) 69 | } 70 | }), 71 | // extract webpack runtime and module manifest to its own file in order to 72 | // prevent vendor hash from being updated whenever app bundle is updated 73 | new webpack.optimize.CommonsChunkPlugin({ 74 | name: 'manifest', 75 | chunks: ['vendor'] 76 | }) 77 | ] 78 | }) 79 | 80 | if (config.build.productionGzip) { 81 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 82 | 83 | webpackConfig.plugins.push( 84 | new CompressionWebpackPlugin({ 85 | asset: '[path].gz[query]', 86 | algorithm: 'gzip', 87 | test: new RegExp( 88 | '\\.(' + 89 | config.build.productionGzipExtensions.join('|') + 90 | ')$' 91 | ), 92 | threshold: 10240, 93 | minRatio: 0.8 94 | }) 95 | ) 96 | } 97 | 98 | module.exports = webpackConfig 99 | -------------------------------------------------------------------------------- /docs/static/css/prism.css: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+go&plugins=show-language */ 2 | /** 3 | * prism.js default theme for JavaScript, CSS and HTML 4 | * Based on dabblet (http://dabblet.com) 5 | * @author Lea Verou 6 | */ 7 | 8 | code[class*="language-"], 9 | pre[class*="language-"] { 10 | color: black; 11 | background: none; 12 | text-shadow: 0 1px white; 13 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 14 | text-align: left; 15 | white-space: pre; 16 | word-spacing: normal; 17 | word-break: normal; 18 | word-wrap: normal; 19 | line-height: 1.5; 20 | 21 | -moz-tab-size: 4; 22 | -o-tab-size: 4; 23 | tab-size: 4; 24 | 25 | -webkit-hyphens: none; 26 | -moz-hyphens: none; 27 | -ms-hyphens: none; 28 | hyphens: none; 29 | } 30 | 31 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, 32 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { 33 | text-shadow: none; 34 | background: #b3d4fc; 35 | } 36 | 37 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection, 38 | code[class*="language-"]::selection, code[class*="language-"] ::selection { 39 | text-shadow: none; 40 | background: #b3d4fc; 41 | } 42 | 43 | @media print { 44 | code[class*="language-"], 45 | pre[class*="language-"] { 46 | text-shadow: none; 47 | } 48 | } 49 | 50 | /* Code blocks */ 51 | pre[class*="language-"] { 52 | padding: 1em; 53 | margin: .5em 0; 54 | overflow: auto; 55 | } 56 | 57 | :not(pre) > code[class*="language-"], 58 | pre[class*="language-"] { 59 | background: #f5f2f0; 60 | } 61 | 62 | /* Inline code */ 63 | :not(pre) > code[class*="language-"] { 64 | padding: .1em; 65 | border-radius: .3em; 66 | white-space: normal; 67 | } 68 | 69 | .token.comment, 70 | .token.prolog, 71 | .token.doctype, 72 | .token.cdata { 73 | color: slategray; 74 | } 75 | 76 | .token.punctuation { 77 | color: #999; 78 | } 79 | 80 | .namespace { 81 | opacity: .7; 82 | } 83 | 84 | .token.property, 85 | .token.tag, 86 | .token.boolean, 87 | .token.number, 88 | .token.constant, 89 | .token.symbol, 90 | .token.deleted { 91 | color: #905; 92 | } 93 | 94 | .token.selector, 95 | .token.attr-name, 96 | .token.string, 97 | .token.char, 98 | .token.builtin, 99 | .token.inserted { 100 | color: #690; 101 | } 102 | 103 | .token.operator, 104 | .token.entity, 105 | .token.url, 106 | .language-css .token.string, 107 | .style .token.string { 108 | color: #a67f59; 109 | background: hsla(0, 0%, 100%, .5); 110 | } 111 | 112 | .token.atrule, 113 | .token.attr-value, 114 | .token.keyword { 115 | color: #07a; 116 | } 117 | 118 | .token.function { 119 | color: #DD4A68; 120 | } 121 | 122 | .token.regex, 123 | .token.important, 124 | .token.variable { 125 | color: #e90; 126 | } 127 | 128 | .token.important, 129 | .token.bold { 130 | font-weight: bold; 131 | } 132 | .token.italic { 133 | font-style: italic; 134 | } 135 | 136 | .token.entity { 137 | cursor: help; 138 | } 139 | 140 | div.prism-show-language { 141 | position: relative; 142 | } 143 | 144 | div.prism-show-language > div.prism-show-language-label { 145 | color: black; 146 | background-color: #CFCFCF; 147 | display: inline-block; 148 | position: absolute; 149 | bottom: auto; 150 | left: auto; 151 | top: 0; 152 | right: 0; 153 | width: auto; 154 | height: auto; 155 | font-size: 0.9em; 156 | border-radius: 0 0 0 5px; 157 | padding: 0 0.5em; 158 | text-shadow: none; 159 | z-index: 1; 160 | -webkit-box-shadow: none; 161 | -moz-box-shadow: none; 162 | box-shadow: none; 163 | -webkit-transform: none; 164 | -moz-transform: none; 165 | -ms-transform: none; 166 | -o-transform: none; 167 | transform: none; 168 | } -------------------------------------------------------------------------------- /docs/static/js/manifest.f9bd485cbcee1e91d218.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///static/js/manifest.f9bd485cbcee1e91d218.js","webpack:///webpack/bootstrap 59450fadf30ecdad61a1"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","id","loaded","call","parentJsonpFunction","window","chunkIds","moreModules","chunkId","i","callbacks","length","installedChunks","push","apply","shift","0","e","callback","undefined","head","document","getElementsByTagName","script","createElement","type","charset","async","src","p","1","2","appendChild","m","c"],"mappings":"CAAS,SAAUA,GCmCnB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAE,WACAE,GAAAJ,EACAK,QAAA,EAUA,OANAP,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,QAAA,EAGAF,EAAAD,QAtDA,GAAAK,GAAAC,OAAA,YACAA,QAAA,sBAAAC,EAAAC,GAIA,IADA,GAAAV,GAAAW,EAAAC,EAAA,EAAAC,KACQD,EAAAH,EAAAK,OAAoBF,IAC5BD,EAAAF,EAAAG,GACAG,EAAAJ,IACAE,EAAAG,KAAAC,MAAAJ,EAAAE,EAAAJ,IACAI,EAAAJ,GAAA,CAEA,KAAAX,IAAAU,GACAZ,EAAAE,GAAAU,EAAAV,EAGA,KADAO,KAAAE,EAAAC,GACAG,EAAAC,QACAD,EAAAK,QAAAZ,KAAA,KAAAP,EACA,IAAAW,EAAA,GAEA,MADAT,GAAA,KACAF,EAAA,GAKA,IAAAE,MAKAc,GACAI,EAAA,EA6BApB,GAAAqB,EAAA,SAAAT,EAAAU,GAEA,OAAAN,EAAAJ,GACA,MAAAU,GAAAf,KAAA,KAAAP,EAGA,IAAAuB,SAAAP,EAAAJ,GACAI,EAAAJ,GAAAK,KAAAK,OACI,CAEJN,EAAAJ,IAAAU,EACA,IAAAE,GAAAC,SAAAC,qBAAA,WACAC,EAAAF,SAAAG,cAAA,SACAD,GAAAE,KAAA,kBACAF,EAAAG,QAAA,QACAH,EAAAI,OAAA,EAEAJ,EAAAK,IAAAhC,EAAAiC,EAAA,aAAArB,EAAA,KAAyEsB,EAAA,uBAAAC,EAAA,wBAAsDvB,GAAA,MAC/HY,EAAAY,YAAAT,KAKA3B,EAAAqC,EAAAtC,EAGAC,EAAAsC,EAAApC,EAGAF,EAAAiC,EAAA","file":"static/js/manifest.f9bd485cbcee1e91d218.js","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// install a JSONP callback for chunk loading\n/******/ \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n/******/ \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n/******/ \t\t// add \"moreModules\" to the modules object,\n/******/ \t\t// then flag all \"chunkIds\" as loaded and fire callback\n/******/ \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n/******/ \t\tfor(;i < chunkIds.length; i++) {\n/******/ \t\t\tchunkId = chunkIds[i];\n/******/ \t\t\tif(installedChunks[chunkId])\n/******/ \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n/******/ \t\t\tinstalledChunks[chunkId] = 0;\n/******/ \t\t}\n/******/ \t\tfor(moduleId in moreModules) {\n/******/ \t\t\tmodules[moduleId] = moreModules[moduleId];\n/******/ \t\t}\n/******/ \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n/******/ \t\twhile(callbacks.length)\n/******/ \t\t\tcallbacks.shift().call(null, __webpack_require__);\n/******/ \t\tif(moreModules[0]) {\n/******/ \t\t\tinstalledModules[0] = 0;\n/******/ \t\t\treturn __webpack_require__(0);\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// object to store loaded and loading chunks\n/******/ \t// \"0\" means \"already loaded\"\n/******/ \t// Array means \"loading\", array contains callbacks\n/******/ \tvar installedChunks = {\n/******/ \t\t0:0\n/******/ \t};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/ \t// This file contains only the entry chunk.\n/******/ \t// The chunk loading function for additional chunks\n/******/ \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n/******/ \t\t// \"0\" is the signal for \"already loaded\"\n/******/ \t\tif(installedChunks[chunkId] === 0)\n/******/ \t\t\treturn callback.call(null, __webpack_require__);\n/******/\n/******/ \t\t// an array means \"currently loading\".\n/******/ \t\tif(installedChunks[chunkId] !== undefined) {\n/******/ \t\t\tinstalledChunks[chunkId].push(callback);\n/******/ \t\t} else {\n/******/ \t\t\t// start chunk loading\n/******/ \t\t\tinstalledChunks[chunkId] = [callback];\n/******/ \t\t\tvar head = document.getElementsByTagName('head')[0];\n/******/ \t\t\tvar script = document.createElement('script');\n/******/ \t\t\tscript.type = 'text/javascript';\n/******/ \t\t\tscript.charset = 'utf-8';\n/******/ \t\t\tscript.async = true;\n/******/\n/******/ \t\t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"1\":\"fdd27c6337658e35d052\",\"2\":\"a2cee7f81015290eb05d\"}[chunkId] + \".js\";\n/******/ \t\t\thead.appendChild(script);\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"/\";\n/******/ })\n/************************************************************************/\n/******/ ([]);\n\n\n// WEBPACK FOOTER //\n// static/js/manifest.f9bd485cbcee1e91d218.js"," \t// install a JSONP callback for chunk loading\n \tvar parentJsonpFunction = window[\"webpackJsonp\"];\n \twindow[\"webpackJsonp\"] = function webpackJsonpCallback(chunkIds, moreModules) {\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, callbacks = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId])\n \t\t\t\tcallbacks.push.apply(callbacks, installedChunks[chunkId]);\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);\n \t\twhile(callbacks.length)\n \t\t\tcallbacks.shift().call(null, __webpack_require__);\n \t\tif(moreModules[0]) {\n \t\t\tinstalledModules[0] = 0;\n \t\t\treturn __webpack_require__(0);\n \t\t}\n \t};\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// \"0\" means \"already loaded\"\n \t// Array means \"loading\", array contains callbacks\n \tvar installedChunks = {\n \t\t0:0\n \t};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n \t// This file contains only the entry chunk.\n \t// The chunk loading function for additional chunks\n \t__webpack_require__.e = function requireEnsure(chunkId, callback) {\n \t\t// \"0\" is the signal for \"already loaded\"\n \t\tif(installedChunks[chunkId] === 0)\n \t\t\treturn callback.call(null, __webpack_require__);\n\n \t\t// an array means \"currently loading\".\n \t\tif(installedChunks[chunkId] !== undefined) {\n \t\t\tinstalledChunks[chunkId].push(callback);\n \t\t} else {\n \t\t\t// start chunk loading\n \t\t\tinstalledChunks[chunkId] = [callback];\n \t\t\tvar head = document.getElementsByTagName('head')[0];\n \t\t\tvar script = document.createElement('script');\n \t\t\tscript.type = 'text/javascript';\n \t\t\tscript.charset = 'utf-8';\n \t\t\tscript.async = true;\n\n \t\t\tscript.src = __webpack_require__.p + \"static/js/\" + chunkId + \".\" + {\"1\":\"fdd27c6337658e35d052\",\"2\":\"a2cee7f81015290eb05d\"}[chunkId] + \".js\";\n \t\t\thead.appendChild(script);\n \t\t}\n \t};\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 59450fadf30ecdad61a1"],"sourceRoot":""} -------------------------------------------------------------------------------- /docs/static/js/prism.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+go&plugins=show-language */ 2 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(m instanceof a)){u.lastIndex=0;var y=u.exec(m),v=1;if(!y&&h&&p!=r.length-1){var b=r[p+1].matchedStr||r[p+1],k=m+b;if(p=m.length)continue;var _=y.index+y[0].length,P=m.length+b.length;if(v=3,P>=_){if(r[p+1].greedy)continue;v=2,k=k.slice(0,P)}m=k}if(y){g&&(f=y[1].length);var w=y.index+f,y=y[0].slice(f),_=w+y.length,S=m.slice(0,w),O=m.slice(_),j=[p,v];S&&j.push(S);var A=new a(i,c?n.tokenize(y,c):y,d,y,h);j.push(A),O&&j.push(O),Array.prototype.splice.apply(r,j)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,l=0;r=a[l++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.matchedStr=a||null,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var l={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){var i="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(l.classes,i)}n.hooks.run("wrap",l);var o="";for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+""},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,l=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),l&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",n.highlightAll)),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); 3 | Prism.languages.markup={comment://,prolog:/<\?[\w\W]+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=.$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/()[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag)); 5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/}; 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","class-name",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/()[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript; 7 | Prism.languages.go=Prism.languages.extend("clike",{keyword:/\b(break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,builtin:/\b(bool|byte|complex(64|128)|error|float(32|64)|rune|string|u?int(8|16|32|64|)|uintptr|append|cap|close|complex|copy|delete|imag|len|make|new|panic|print(ln)?|real|recover)\b/,"boolean":/\b(_|iota|nil|true|false)\b/,operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,number:/\b(-?(0x[a-f\d]+|(\d+\.?\d*|\.\d+)(e[-+]?\d+)?)i?)\b/i,string:/("|'|`)(\\?.|\r|\n)*?\1/}),delete Prism.languages.go["class-name"]; 8 | !function(){if("undefined"!=typeof self&&self.Prism&&self.document){var e={html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",css:"CSS",clike:"C-like",javascript:"JavaScript",abap:"ABAP",actionscript:"ActionScript",apacheconf:"Apache Configuration",apl:"APL",applescript:"AppleScript",asciidoc:"AsciiDoc",aspnet:"ASP.NET (C#)",autoit:"AutoIt",autohotkey:"AutoHotkey",basic:"BASIC",csharp:"C#",cpp:"C++",coffeescript:"CoffeeScript","css-extras":"CSS Extras",fsharp:"F#",glsl:"GLSL",http:"HTTP",inform7:"Inform 7",json:"JSON",latex:"LaTeX",lolcode:"LOLCODE",matlab:"MATLAB",mel:"MEL",nasm:"NASM",nginx:"nginx",nsis:"NSIS",objectivec:"Objective-C",ocaml:"OCaml",parigp:"PARI/GP",php:"PHP","php-extras":"PHP Extras",powershell:"PowerShell",protobuf:"Protocol Buffers",jsx:"React JSX",rest:"reST (reStructuredText)",sas:"SAS",sass:"Sass (Sass)",scss:"Sass (Scss)",sql:"SQL",typescript:"TypeScript",vhdl:"VHDL",vim:"vim",wiki:"Wiki markup",yaml:"YAML"};Prism.hooks.add("before-highlight",function(s){var a=s.element.parentNode;if(a&&/pre/i.test(a.nodeName)){var t,i,r=a.getAttribute("data-language")||e[s.language]||s.language.substring(0,1).toUpperCase()+s.language.substring(1),l=a.previousSibling;l&&/\s*\bprism-show-language\b\s*/.test(l.className)&&l.firstChild&&/\s*\bprism-show-language-label\b\s*/.test(l.firstChild.className)?i=l.firstChild:(t=document.createElement("div"),i=document.createElement("div"),i.className="prism-show-language-label",t.className="prism-show-language",t.appendChild(i),a.parentNode.insertBefore(t,a)),i.innerHTML=r}})}}(); -------------------------------------------------------------------------------- /dist/vue-instant.common.js: -------------------------------------------------------------------------------- 1 | module.exports=function(modules){function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}var installedModules={};return __webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.i=function(value){return value},__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{configurable:!1,enumerable:!0,get:getter})},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function(){return module.default}:function(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="",__webpack_require__(__webpack_require__.s=2)}([function(module,exports,__webpack_require__){__webpack_require__(3);var Component=__webpack_require__(4)(__webpack_require__(1),__webpack_require__(5),null,null);module.exports=Component.exports},function(module,__webpack_exports__,__webpack_require__){"use strict";Object.defineProperty(__webpack_exports__,"__esModule",{value:!0});var __WEBPACK_IMPORTED_MODULE_0_vue_clickaway__=__webpack_require__(6);__webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue_clickaway__);__webpack_exports__.default={name:"vueInstant",mixins:[__WEBPACK_IMPORTED_MODULE_0_vue_clickaway__.mixin],props:{value:{type:String,required:!0},suggestions:{type:Array,required:!0},suggestionAttribute:{type:String,required:!0},placeholder:{type:String,default:"write something..."},minMatch:{type:Number,default:2},name:{type:String,default:"vueInstant"},autofocus:{type:Boolean,default:!0},disabled:{type:Boolean},type:{type:String,default:"facebook"},showAutocomplete:{type:Boolean,default:!0},suggestOnAllWords:{type:Boolean,default:!1}},data:function(){return{selectedEvent:null,selectedSuggest:null,inputChanged:!1,suggestionsIsVisible:!0,highlightedIndex:0,highlightedIndexMax:7,similiarData:[],placeholderVal:this.placeholder,types:[{name:"facebook",formClass:"searchbox sbx-facebook",classWrapper:"sbx-facebook__wrapper",classInput:"sbx-facebook__input",classInputPlaceholder:"sbx-facebook__input-placeholder",classSubmit:"sbx-facebook__submit",svgSearch:"#sbx-icon-search-8",classReset:"sbx-facebook__reset",svgClear:"#sbx-icon-clear-4",highlighClass:"highlighted__facebook"},{name:"google",formClass:"searchbox sbx-google",classWrapper:"sbx-google__wrapper",classInput:"sbx-google__input",classInputPlaceholder:"sbx-google__input-placeholder",classSubmit:"sbx-google__submit",svgSearch:"#sbx-icon-search-8",classReset:"sbx-google__reset",svgClear:"#sbx-icon-clear-4",highlighClass:"highlighted__google"},{name:"amazon",formClass:"searchbox sbx-amazon",classWrapper:"sbx-amazon__wrapper",classInput:"sbx-amazon__input",classInputPlaceholder:"sbx-amazon__input-placeholder",classSubmit:"sbx-amazon__submit",svgSearch:"#sbx-icon-search-8",classReset:"sbx-amazon__reset",svgClear:"#sbx-icon-clear-4",highlighClass:"highlighted__amazon"},{name:"twitter",formClass:"searchbox sbx-twitter",classWrapper:"sbx-twitter__wrapper",classInput:"sbx-twitter__input",classInputPlaceholder:"sbx-twitter__input-placeholder",classSubmit:"sbx-twitter__submit",svgSearch:"#sbx-icon-search-8",classReset:"sbx-twitter__reset",svgClear:"#sbx-icon-clear-4",highlighClass:"highlighted__twitter"},{name:"spotify",formClass:"searchbox sbx-spotify",classWrapper:"sbx-spotify__wrapper",classInput:"sbx-spotify__input",classInputPlaceholder:"sbx-spotify__input-placeholder",classSubmit:"sbx-spotify__submit",svgSearch:"#sbx-icon-search-8",classReset:"sbx-spotify__reset",svgClear:"#sbx-icon-clear-4",highlighClass:"highlighted__spotify"},{name:"custom",formClass:"searchbox sbx-custom",classWrapper:"sbx-custom__wrapper",classInput:"sbx-custom__input",classInputPlaceholder:"sbx-custom__input-placeholder",classSubmit:"sbx-custom__submit",svgSearch:"#sbx-icon-search-8",classReset:"sbx-custom__reset",svgClear:"#sbx-icon-clear-4",highlighClass:"highlighted__custom"}]}},watch:{suggestions:{deep:!0,handler:function(){this.findSuggests()}},placeholder:function(val){this.textValIsEmpty()&&(this.placeholderVal=val)}},computed:{getPlaceholder:function(){if(this.inputChanged||this.textValIsEmpty())return this.placeholderVal},modeIsFull:function(){return this.showAutocomplete},showSuggestions:function(){return this.similiarData.length>=this.minMatch},getPropertiesClass:function(){return this.getType().properties},getFormClass:function(){return this.getType().formClass},getClassWrapper:function(){return this.getType().classWrapper},getClassInput:function(){return this.getType().classInput},getClassInputPlaceholder:function(){return this.getType().classInputPlaceholder},getClassSubmit:function(){return this.getType().classSubmit},getSVGSearch:function(){return this.getType().svgSearch},getClassReset:function(){return this.getType().classReset},getSVGClear:function(){return this.getType().svgClear},textVal:{get:function(){return this.value},set:function(v){this.$emit("input",v)}}},methods:{decrementHighlightedIndex:function(){this.highlightedIndex-=1},incrementHighlightedIndex:function(){this.highlightedIndex+=1},escapeAction:function(){this.clearHighlightedIndex(),this.clearSimilarData(),this.clearSelected(),this.setBlur(),this.emitEscape()},arrowRightAction:function(){this.setPlaceholderAndTextVal(),this.emitKeyRight()},arrowDownAction:function(){this.arrowDownValidation()?(this.incrementHighlightedIndex(),this.setPlaceholderAndTextVal(),this.emitKeyDown()):this.clearHighlightedIndex()},arrowUpAction:function(){this.highlightedIndex>0?(this.decrementHighlightedIndex(),this.setPlaceholderAndTextVal(),this.emitKeyUp()):this.clearHighlightedIndex()},enterAction:function(){this.setFinalTextValue(),this.clearHighlightedIndex(),this.clearSimilarData(),this.emitEnter()},selectedAction:function(index){this.highlightedIndex=index,this.setFinalTextValue(),this.clearPlaceholder(),this.clearSimilarData(),this.emitSelected()},addRegister:function(o){this.isSimilar(o)&&this.textValIsNotEmpty()&&this.addSuggestion(o)},addSuggestion:function(o){this.findSuggestionTextIsRepited(o)||this.addToSimilarData(o)},addToSimilarData:function(o){this.canAddToSimilarData()&&(this.placeholderVal=this.letterProcess(o),this.selectedSuggest=o,this.emitSelected(),this.similiarData.unshift(o))},setTextValue:function(e){e.target.value.trim()&&(this.textVal=e.target.value,this.emitChange())},setSelectedAsTextValue:function(){this.textVal=this.selected},setInitialTextValue:function(){this.textVal=this.value},setFinalTextValue:function(){this.finalTextValueValidation()?(this.setPlaceholderAndTextVal(),this.emitChange()):this.clearAll()},setPlaceholderAndTextVal:function(){if(void 0!==this.similiarData[this.highlightedIndex]){var suggest=this.similiarData[this.highlightedIndex];this.placeholderVal=suggest[this.suggestionAttribute],this.textVal=suggest[this.suggestionAttribute],this.selectedSuggest=suggest,this.emitSelected()}},setInitialPlaceholder:function(){this.placeholderVal=this.placeholder},setBlur:function(){this.$el.blur()},getType:function(){return this.types.find(this.isSameType)},getClassHighlighted:function(index){if(this.highlightedIndex===index){return this.getType().highlighClass}},letterProcess:function(o){var remoteText=o[this.suggestionAttribute].split("");return this.textVal.split("").forEach(function(letter,key){letter!==remoteText[key]&&(remoteText[key]=letter)}),remoteText.join("")},findSuggests:function(){this.suggestionsPropIsDefined()&&this.suggestions.forEach(this.addRegister)},arrowDownValidation:function(){return this.highlightedIndex0)return words.forEach(function(word){textValWords.length>0?textValWords.forEach(function(textValWord){word.toLowerCase().startsWith(textValWord.toLowerCase())&&(isMatch=!0)}):word.toLowerCase().startsWith(this.textVal.toLowerCase())&&(isMatch=!0)}),isMatch}return o[this.suggestionAttribute].toLowerCase().startsWith(this.textVal.toLowerCase())}},isSameType:function(o){return o.name===this.type},fnExists:function(fnName){return"function"==typeof fnName},canAddToSimilarData:function(){return this.similiarData.length=this.minMatch},getPropertiesClass:function(){return this.getType().properties},getFormClass:function(){return this.getType().formClass},getClassWrapper:function(){return this.getType().classWrapper},getClassInput:function(){return this.getType().classInput},getClassInputPlaceholder:function(){return this.getType().classInputPlaceholder},getClassSubmit:function(){return this.getType().classSubmit},getSVGSearch:function(){return this.getType().svgSearch},getClassReset:function(){return this.getType().classReset},getSVGClear:function(){return this.getType().svgClear},textVal:{get:function(){return this.value},set:function(v){this.$emit("input",v)}}},methods:{decrementHighlightedIndex:function(){this.highlightedIndex-=1},incrementHighlightedIndex:function(){this.highlightedIndex+=1},escapeAction:function(){this.clearHighlightedIndex(),this.clearSimilarData(),this.clearSelected(),this.setBlur(),this.emitEscape()},arrowRightAction:function(){this.setPlaceholderAndTextVal(),this.emitKeyRight()},arrowDownAction:function(){this.arrowDownValidation()?(this.incrementHighlightedIndex(),this.setPlaceholderAndTextVal(),this.emitKeyDown()):this.clearHighlightedIndex()},arrowUpAction:function(){this.highlightedIndex>0?(this.decrementHighlightedIndex(),this.setPlaceholderAndTextVal(),this.emitKeyUp()):this.clearHighlightedIndex()},enterAction:function(){this.setFinalTextValue(),this.clearHighlightedIndex(),this.clearSimilarData(),this.emitEnter()},selectedAction:function(index){this.highlightedIndex=index,this.setFinalTextValue(),this.clearPlaceholder(),this.clearSimilarData(),this.emitSelected()},addRegister:function(o){this.isSimilar(o)&&this.textValIsNotEmpty()&&this.addSuggestion(o)},addSuggestion:function(o){this.findSuggestionTextIsRepited(o)||this.addToSimilarData(o)},addToSimilarData:function(o){this.canAddToSimilarData()&&(this.placeholderVal=this.letterProcess(o),this.selectedSuggest=o,this.emitSelected(),this.similiarData.unshift(o))},setTextValue:function(e){e.target.value.trim()&&(this.textVal=e.target.value,this.emitChange())},setSelectedAsTextValue:function(){this.textVal=this.selected},setInitialTextValue:function(){this.textVal=this.value},setFinalTextValue:function(){this.finalTextValueValidation()?(this.setPlaceholderAndTextVal(),this.emitChange()):this.clearAll()},setPlaceholderAndTextVal:function(){if(void 0!==this.similiarData[this.highlightedIndex]){var suggest=this.similiarData[this.highlightedIndex];this.placeholderVal=suggest[this.suggestionAttribute],this.textVal=suggest[this.suggestionAttribute],this.selectedSuggest=suggest,this.emitSelected()}},setInitialPlaceholder:function(){this.placeholderVal=this.placeholder},setBlur:function(){this.$el.blur()},getType:function(){return this.types.find(this.isSameType)},getClassHighlighted:function(index){if(this.highlightedIndex===index){return this.getType().highlighClass}},letterProcess:function(o){var remoteText=o[this.suggestionAttribute].split("");return this.textVal.split("").forEach(function(letter,key){letter!==remoteText[key]&&(remoteText[key]=letter)}),remoteText.join("")},findSuggests:function(){this.suggestionsPropIsDefined()&&this.suggestions.forEach(this.addRegister)},arrowDownValidation:function(){return this.highlightedIndex0)return words.forEach(function(word){textValWords.length>0?textValWords.forEach(function(textValWord){word.toLowerCase().startsWith(textValWord.toLowerCase())&&(isMatch=!0)}):word.toLowerCase().startsWith(this.textVal.toLowerCase())&&(isMatch=!0)}),isMatch}return o[this.suggestionAttribute].toLowerCase().startsWith(this.textVal.toLowerCase())}},isSameType:function(o){return o.name===this.type},fnExists:function(fnName){return"function"==typeof fnName},canAddToSimilarData:function(){return this.similiarData.length 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Tue Sep 6 12:16:07 2016 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 36 | 38 | 40 | 42 | 44 | 46 | 48 | 50 | 52 | 54 | 57 | 60 | 63 | 66 | 69 | 72 | 75 | 77 | 79 | 83 | 85 | 87 | 90 | 93 | 96 | 99 | 101 | 104 | 107 | 109 | 112 | 117 | 121 | 125 | 128 | 131 | 134 | 138 | 142 | 145 | 146 | 147 | -------------------------------------------------------------------------------- /dist/vue-instant.css: -------------------------------------------------------------------------------- 1 | 2 | .sbx-facebook { 3 | display: inline-block; 4 | position: relative; 5 | width: 450px; 6 | height: 27px; 7 | white-space: nowrap; 8 | box-sizing: border-box; 9 | font-size: 13px; 10 | } 11 | .sbx-facebook__wrapper { 12 | width: 100%; 13 | height: 100%; 14 | } 15 | .sbx-facebook__input { 16 | position: absolute !important; 17 | left: 0 !important; 18 | top: 0 !important; 19 | -webkit-transition: box-shadow .4s ease, background .4s ease; 20 | transition: box-shadow .4s ease, background .4s ease; 21 | border: 0; 22 | border-radius: 4px; 23 | box-shadow: inset 0 0 0 0px #CCCCCC; 24 | background: rgba(255, 255, 255, 0); 25 | padding: 0; 26 | padding-right: 62px; 27 | padding-left: 11px; 28 | width: 100%; 29 | height: 100%; 30 | vertical-align: middle; 31 | white-space: normal; 32 | font-size: inherit; 33 | -webkit-appearance: none; 34 | -moz-appearance: none; 35 | appearance: none; 36 | } 37 | .sbx-facebook__input-placeholder { 38 | -webkit-transition: box-shadow .4s ease, background .4s ease; 39 | transition: box-shadow .4s ease, background .4s ease; 40 | border: 0; 41 | border-radius: 4px; 42 | box-shadow: inset 0 0 0 0px #CCCCCC; 43 | background: #FFFFFF; 44 | padding: 0; 45 | padding-right: 62px; 46 | padding-left: 11px; 47 | width: 100%; 48 | height: 100%; 49 | vertical-align: middle; 50 | white-space: normal; 51 | font-size: inherit; 52 | -webkit-appearance: none; 53 | -moz-appearance: none; 54 | appearance: none; 55 | } 56 | .sbx-facebook__input::-webkit-search-decoration, 57 | .sbx-facebook__input::-webkit-search-cancel-button, 58 | .sbx-facebook__input::-webkit-search-results-button, 59 | .sbx-facebook__input::-webkit-search-results-decoration { 60 | display: none; 61 | } 62 | .sbx-facebook__input:hover { 63 | box-shadow: inset 0 0 0 0px #b3b3b3; 64 | } 65 | .sbx-facebook__input:focus, 66 | .sbx-facebook__input:active { 67 | outline: 0; 68 | box-shadow: inset 0 0 0 0px #3E82F7; 69 | background: rgba(255, 255, 255, 0) 70 | } 71 | .sbx-facebook__input::-webkit-input-placeholder { 72 | color: #AAAAAA; 73 | } 74 | .sbx-facebook__input::-moz-placeholder { 75 | color: #AAAAAA; 76 | } 77 | .sbx-facebook__input:-ms-input-placeholder { 78 | color: #AAAAAA; 79 | } 80 | .sbx-facebook__input::placeholder { 81 | color: #AAAAAA; 82 | } 83 | .sbx-facebook__submit { 84 | position: absolute; 85 | top: 0; 86 | right: 0; 87 | left: inherit; 88 | margin: 0; 89 | border: 0; 90 | border-radius: 0 3px 3px 0; 91 | background-color: #f6f7f8; 92 | padding: 0; 93 | width: 35px; 94 | height: 100%; 95 | vertical-align: middle; 96 | text-align: center; 97 | font-size: inherit; 98 | -webkit-user-select: none; 99 | -moz-user-select: none; 100 | -ms-user-select: none; 101 | user-select: none; 102 | } 103 | .sbx-facebook__submit::before { 104 | display: inline-block; 105 | margin-right: -4px; 106 | height: 100%; 107 | vertical-align: middle; 108 | content: ''; 109 | } 110 | .sbx-facebook__submit:hover, 111 | .sbx-facebook__submit:active { 112 | cursor: pointer; 113 | } 114 | .sbx-facebook__submit:focus { 115 | outline: 0; 116 | } 117 | .sbx-facebook__submit svg { 118 | width: 15px; 119 | height: 15px; 120 | vertical-align: middle; 121 | fill: #3C5BA2; 122 | } 123 | .sbx-facebook__reset { 124 | display: none; 125 | position: absolute; 126 | top: 3px; 127 | right: 41px; 128 | margin: 0; 129 | border: 0; 130 | background: none; 131 | cursor: pointer; 132 | padding: 0; 133 | font-size: inherit; 134 | -webkit-user-select: none; 135 | -moz-user-select: none; 136 | -ms-user-select: none; 137 | user-select: none; 138 | fill: rgba(0, 0, 0, 0.5); 139 | } 140 | .sbx-facebook__reset:focus { 141 | outline: 0; 142 | } 143 | .sbx-facebook__reset svg { 144 | display: block; 145 | margin: 4px; 146 | width: 13px; 147 | height: 13px; 148 | } 149 | .sbx-facebook__input:valid~.sbx-facebook__reset { 150 | display: block; 151 | -webkit-animation-name: sbx-reset-in; 152 | animation-name: sbx-reset-in; 153 | -webkit-animation-duration: .15s; 154 | animation-duration: .15s; 155 | } 156 | @-webkit-keyframes sbx-reset-in { 157 | 0% { 158 | -webkit-transform: translate3d(-20%, 0, 0); 159 | transform: translate3d(-20%, 0, 0); 160 | opacity: 0; 161 | } 162 | 100% { 163 | -webkit-transform: none; 164 | transform: none; 165 | opacity: 1; 166 | } 167 | } 168 | @keyframes sbx-reset-in { 169 | 0% { 170 | -webkit-transform: translate3d(-20%, 0, 0); 171 | transform: translate3d(-20%, 0, 0); 172 | opacity: 0; 173 | } 174 | 100% { 175 | -webkit-transform: none; 176 | transform: none; 177 | opacity: 1; 178 | } 179 | } 180 | 181 | 182 | /* amazon*/ 183 | .sbx-amazon { 184 | display: inline-block; 185 | position: relative; 186 | width: 600px; 187 | height: 39px; 188 | white-space: nowrap; 189 | box-sizing: border-box; 190 | font-size: 14px; 191 | } 192 | .sbx-amazon__wrapper { 193 | width: 100%; 194 | height: 100%; 195 | } 196 | .sbx-amazon__input { 197 | display: inline-block; 198 | position: absolute !important; 199 | left: 0 !important; 200 | top: 0 !important; 201 | -webkit-transition: box-shadow .4s ease, background .4s ease; 202 | transition: box-shadow .4s ease, background .4s ease; 203 | border: 0; 204 | border-radius: 4px; 205 | box-shadow: inset 0 0 0 1px #FFFFFF; 206 | background: rgba(255, 255, 255, 0); 207 | padding: 0; 208 | padding-right: 75px; 209 | padding-left: 11px; 210 | width: 100%; 211 | height: 100%; 212 | vertical-align: middle; 213 | white-space: normal; 214 | font-size: inherit; 215 | -webkit-appearance: none; 216 | -moz-appearance: none; 217 | appearance: none; 218 | } 219 | .sbx-amazon__input-placeholder { 220 | display: inline-block; 221 | -webkit-transition: box-shadow .4s ease, background .4s ease; 222 | transition: box-shadow .4s ease, background .4s ease; 223 | border: 0; 224 | border-radius: 4px; 225 | box-shadow: inset 0 0 0 1px #FFFFFF; 226 | background: #FFFFFF; 227 | padding: 0; 228 | padding-right: 75px; 229 | padding-left: 11px; 230 | width: 100%; 231 | height: 100%; 232 | vertical-align: middle; 233 | white-space: normal; 234 | font-size: inherit; 235 | -webkit-appearance: none; 236 | -moz-appearance: none; 237 | appearance: none; 238 | } 239 | .sbx-amazon__input::-webkit-search-decoration, 240 | .sbx-amazon__input::-webkit-search-cancel-button, 241 | .sbx-amazon__input::-webkit-search-results-button, 242 | .sbx-amazon__input::-webkit-search-results-decoration { 243 | display: none; 244 | } 245 | .sbx-amazon__input:hover { 246 | box-shadow: inset 0 0 0 1px #e6e6e6; 247 | } 248 | .sbx-amazon__input:focus, 249 | .sbx-amazon__input:active { 250 | outline: 0; 251 | box-shadow: inset 0 0 0 1px #FFBF58; 252 | background: rgba(255, 255, 255, 0) 253 | } 254 | .sbx-amazon__input::-webkit-input-placeholder { 255 | color: #AAAAAA; 256 | } 257 | .sbx-amazon__input::-moz-placeholder { 258 | color: #AAAAAA; 259 | } 260 | .sbx-amazon__input:-ms-input-placeholder { 261 | color: #AAAAAA; 262 | } 263 | .sbx-amazon__input::placeholder { 264 | color: #AAAAAA; 265 | } 266 | .sbx-amazon__submit { 267 | position: absolute; 268 | top: 0; 269 | right: 0; 270 | left: inherit; 271 | margin: 0; 272 | border: 0; 273 | border-radius: 0 3px 3px 0; 274 | background-color: #ffbf58; 275 | padding: 0; 276 | width: 47px; 277 | height: 100%; 278 | vertical-align: middle; 279 | text-align: center; 280 | font-size: inherit; 281 | -webkit-user-select: none; 282 | -moz-user-select: none; 283 | -ms-user-select: none; 284 | user-select: none; 285 | } 286 | .sbx-amazon__submit::before { 287 | display: inline-block; 288 | margin-right: -4px; 289 | height: 100%; 290 | vertical-align: middle; 291 | content: ''; 292 | } 293 | .sbx-amazon__submit:hover, 294 | .sbx-amazon__submit:active { 295 | cursor: pointer; 296 | } 297 | .sbx-amazon__submit:focus { 298 | outline: 0; 299 | } 300 | .sbx-amazon__submit svg { 301 | width: 21px; 302 | height: 21px; 303 | vertical-align: middle; 304 | fill: #202F40; 305 | } 306 | .sbx-amazon__reset { 307 | display: none; 308 | position: absolute; 309 | top: 9px; 310 | right: 54px; 311 | margin: 0; 312 | border: 0; 313 | background: none; 314 | cursor: pointer; 315 | padding: 0; 316 | font-size: inherit; 317 | -webkit-user-select: none; 318 | -moz-user-select: none; 319 | -ms-user-select: none; 320 | user-select: none; 321 | fill: rgba(0, 0, 0, 0.5); 322 | } 323 | .sbx-amazon__reset:focus { 324 | outline: 0; 325 | } 326 | .sbx-amazon__reset svg { 327 | display: block; 328 | margin: 4px; 329 | width: 13px; 330 | height: 13px; 331 | } 332 | .sbx-amazon__input:valid~.sbx-amazon__reset { 333 | display: block; 334 | -webkit-animation-name: sbx-reset-in; 335 | animation-name: sbx-reset-in; 336 | -webkit-animation-duration: .15s; 337 | animation-duration: .15s; 338 | } 339 | @-webkit-keyframes sbx-reset-in { 340 | 0% { 341 | -webkit-transform: translate3d(-20%, 0, 0); 342 | transform: translate3d(-20%, 0, 0); 343 | opacity: 0; 344 | } 345 | 100% { 346 | -webkit-transform: none; 347 | transform: none; 348 | opacity: 1; 349 | } 350 | } 351 | @keyframes sbx-reset-in { 352 | 0% { 353 | -webkit-transform: translate3d(-20%, 0, 0); 354 | transform: translate3d(-20%, 0, 0); 355 | opacity: 0; 356 | } 357 | 100% { 358 | -webkit-transform: none; 359 | transform: none; 360 | opacity: 1; 361 | } 362 | } 363 | 364 | 365 | /* google */ 366 | .sbx-google { 367 | display: inline-block; 368 | position: relative; 369 | width: 500px; 370 | height: 41px; 371 | white-space: nowrap; 372 | box-sizing: border-box; 373 | font-size: 14px; 374 | } 375 | .sbx-google__wrapper { 376 | width: 100%; 377 | height: 100%; 378 | } 379 | .sbx-google__input { 380 | display: inline-block; 381 | position: absolute !important; 382 | left: 0 !important; 383 | top: 0 !important; 384 | -webkit-transition: box-shadow .4s ease, background .4s ease; 385 | transition: box-shadow .4s ease, background .4s ease; 386 | border: 0; 387 | border-radius: 4px; 388 | box-shadow: inset 0 0 0 1px #CCCCCC; 389 | background: rgba(255, 255, 255, 0); 390 | padding: 0; 391 | padding-right: 77px; 392 | padding-left: 11px; 393 | width: 100%; 394 | height: 100%; 395 | vertical-align: middle; 396 | white-space: normal; 397 | font-size: inherit; 398 | -webkit-appearance: none; 399 | -moz-appearance: none; 400 | appearance: none; 401 | } 402 | .sbx-google__input-placeholder { 403 | display: inline-block; 404 | -webkit-transition: box-shadow .4s ease, background .4s ease; 405 | transition: box-shadow .4s ease, background .4s ease; 406 | border: 0; 407 | border-radius: 4px; 408 | box-shadow: inset 0 0 0 1px #CCCCCC; 409 | background: #FFFFFF; 410 | padding: 0; 411 | padding-right: 77px; 412 | padding-left: 11px; 413 | width: 100%; 414 | height: 100%; 415 | vertical-align: middle; 416 | white-space: normal; 417 | font-size: inherit; 418 | -webkit-appearance: none; 419 | -moz-appearance: none; 420 | appearance: none; 421 | } 422 | .sbx-google__input::-webkit-search-decoration, 423 | .sbx-google__input::-webkit-search-cancel-button, 424 | .sbx-google__input::-webkit-search-results-button, 425 | .sbx-google__input::-webkit-search-results-decoration { 426 | display: none; 427 | } 428 | .sbx-google__input:hover { 429 | box-shadow: inset 0 0 0 1px #b3b3b3; 430 | } 431 | .sbx-google__input:focus, 432 | .sbx-google__input:active { 433 | outline: 0; 434 | box-shadow: inset 0 0 0 1px #3E82F7; 435 | background: rgba(255, 255, 255, 0) 436 | } 437 | .sbx-google__input::-webkit-input-placeholder { 438 | color: #AAAAAA; 439 | } 440 | .sbx-google__input::-moz-placeholder { 441 | color: #AAAAAA; 442 | } 443 | .sbx-google__input:-ms-input-placeholder { 444 | color: #AAAAAA; 445 | } 446 | .sbx-google__input::placeholder { 447 | color: #AAAAAA; 448 | } 449 | .sbx-google__submit { 450 | position: absolute; 451 | top: 0; 452 | right: 0; 453 | left: inherit; 454 | margin: 0; 455 | border: 0; 456 | border-radius: 0 3px 3px 0; 457 | background-color: #3e82f7; 458 | padding: 0; 459 | width: 49px; 460 | height: 100%; 461 | vertical-align: middle; 462 | text-align: center; 463 | font-size: inherit; 464 | -webkit-user-select: none; 465 | -moz-user-select: none; 466 | -ms-user-select: none; 467 | user-select: none; 468 | } 469 | .sbx-google__submit::before { 470 | display: inline-block; 471 | margin-right: -4px; 472 | height: 100%; 473 | vertical-align: middle; 474 | content: ''; 475 | } 476 | .sbx-google__submit:hover, 477 | .sbx-google__submit:active { 478 | cursor: pointer; 479 | } 480 | .sbx-google__submit:focus { 481 | outline: 0; 482 | } 483 | .sbx-google__submit svg { 484 | width: 21px; 485 | height: 21px; 486 | vertical-align: middle; 487 | fill: #FFFFFF; 488 | } 489 | .sbx-google__reset { 490 | display: none; 491 | position: absolute; 492 | top: 10px; 493 | right: 56px; 494 | margin: 0; 495 | border: 0; 496 | background: none; 497 | cursor: pointer; 498 | padding: 0; 499 | font-size: inherit; 500 | -webkit-user-select: none; 501 | -moz-user-select: none; 502 | -ms-user-select: none; 503 | user-select: none; 504 | fill: rgba(0, 0, 0, 0.5); 505 | } 506 | .sbx-google__reset:focus { 507 | outline: 0; 508 | } 509 | .sbx-google__reset svg { 510 | display: block; 511 | margin: 4px; 512 | width: 13px; 513 | height: 13px; 514 | } 515 | .sbx-google__input:valid~.sbx-google__reset { 516 | display: block; 517 | -webkit-animation-name: sbx-reset-in; 518 | animation-name: sbx-reset-in; 519 | -webkit-animation-duration: .15s; 520 | animation-duration: .15s; 521 | } 522 | @-webkit-keyframes sbx-reset-in { 523 | 0% { 524 | -webkit-transform: translate3d(-20%, 0, 0); 525 | transform: translate3d(-20%, 0, 0); 526 | opacity: 0; 527 | } 528 | 100% { 529 | -webkit-transform: none; 530 | transform: none; 531 | opacity: 1; 532 | } 533 | } 534 | @keyframes sbx-reset-in { 535 | 0% { 536 | -webkit-transform: translate3d(-20%, 0, 0); 537 | transform: translate3d(-20%, 0, 0); 538 | opacity: 0; 539 | } 540 | 100% { 541 | -webkit-transform: none; 542 | transform: none; 543 | opacity: 1; 544 | } 545 | } 546 | 547 | 548 | /* twitter */ 549 | .sbx-twitter { 550 | display: inline-block; 551 | position: relative; 552 | width: 200px; 553 | height: 33px; 554 | white-space: nowrap; 555 | box-sizing: border-box; 556 | font-size: 12px; 557 | } 558 | .sbx-twitter__wrapper { 559 | width: 100%; 560 | height: 100%; 561 | } 562 | .sbx-twitter__input { 563 | display: inline-block; 564 | position: absolute; 565 | left: 0 !important; 566 | top: 0 !important; 567 | -webkit-transition: box-shadow .4s ease, background .4s ease; 568 | transition: box-shadow .4s ease, background .4s ease; 569 | border: 0; 570 | border-radius: 17px; 571 | box-shadow: inset 0 0 0 1px #E1E8ED; 572 | background: rgba(255, 255, 255, 0); 573 | padding: 0; 574 | padding-right: 52px; 575 | padding-left: 16px; 576 | width: 100%; 577 | height: 100%; 578 | vertical-align: middle; 579 | white-space: normal; 580 | font-size: inherit; 581 | -webkit-appearance: none; 582 | -moz-appearance: none; 583 | appearance: none; 584 | } 585 | .sbx-twitter__input-placeholder { 586 | display: inline-block; 587 | -webkit-transition: box-shadow .4s ease, background .4s ease; 588 | transition: box-shadow .4s ease, background .4s ease; 589 | border: 0; 590 | border-radius: 17px; 591 | box-shadow: inset 0 0 0 1px #E1E8ED; 592 | background: rgba(255, 255, 255, 0); 593 | padding: 0; 594 | padding-right: 52px; 595 | padding-left: 16px; 596 | width: 100%; 597 | height: 100%; 598 | vertical-align: middle; 599 | white-space: normal; 600 | font-size: inherit; 601 | -webkit-appearance: none; 602 | -moz-appearance: none; 603 | appearance: none; 604 | } 605 | .sbx-twitter__input::-webkit-search-decoration, 606 | .sbx-twitter__input::-webkit-search-cancel-button, 607 | .sbx-twitter__input::-webkit-search-results-button, 608 | .sbx-twitter__input::-webkit-search-results-decoration { 609 | display: none; 610 | } 611 | .sbx-twitter__input:hover { 612 | box-shadow: inset 0 0 0 1px #c1d0da; 613 | } 614 | .sbx-twitter__input:focus, 615 | .sbx-twitter__input:active { 616 | outline: 0; 617 | box-shadow: inset 0 0 0 1px #D6DEE3; 618 | background: rgba(255, 255, 255, 0) 619 | } 620 | .sbx-twitter__input::-webkit-input-placeholder { 621 | color: #9AAEB5; 622 | } 623 | .sbx-twitter__input::-moz-placeholder { 624 | color: #9AAEB5; 625 | } 626 | .sbx-twitter__input:-ms-input-placeholder { 627 | color: #9AAEB5; 628 | } 629 | .sbx-twitter__input::placeholder { 630 | color: #9AAEB5; 631 | } 632 | .sbx-twitter__submit { 633 | position: absolute; 634 | top: 0; 635 | right: 0; 636 | left: inherit; 637 | margin: 0; 638 | border: 0; 639 | border-radius: 0 16px 16px 0; 640 | background-color: rgba(62, 130, 247, 0); 641 | padding: 0; 642 | width: 33px; 643 | height: 100%; 644 | vertical-align: middle; 645 | text-align: center; 646 | font-size: inherit; 647 | -webkit-user-select: none; 648 | -moz-user-select: none; 649 | -ms-user-select: none; 650 | user-select: none; 651 | } 652 | .sbx-twitter__submit::before { 653 | display: inline-block; 654 | margin-right: -4px; 655 | height: 100%; 656 | vertical-align: middle; 657 | content: ''; 658 | } 659 | .sbx-twitter__submit:hover, 660 | .sbx-twitter__submit:active { 661 | cursor: pointer; 662 | } 663 | .sbx-twitter__submit:focus { 664 | outline: 0; 665 | } 666 | .sbx-twitter__submit svg { 667 | width: 13px; 668 | height: 13px; 669 | vertical-align: middle; 670 | fill: #657580; 671 | } 672 | .sbx-twitter__reset { 673 | display: none; 674 | position: absolute; 675 | top: 7px; 676 | right: 33px; 677 | margin: 0; 678 | border: 0; 679 | background: none; 680 | cursor: pointer; 681 | padding: 0; 682 | font-size: inherit; 683 | -webkit-user-select: none; 684 | -moz-user-select: none; 685 | -ms-user-select: none; 686 | user-select: none; 687 | fill: rgba(0, 0, 0, 0.5); 688 | } 689 | .sbx-twitter__reset:focus { 690 | outline: 0; 691 | } 692 | .sbx-twitter__reset svg { 693 | display: block; 694 | margin: 4px; 695 | width: 11px; 696 | height: 11px; 697 | } 698 | .sbx-twitter__input:valid~.sbx-twitter__reset { 699 | display: block; 700 | -webkit-animation-name: sbx-reset-in; 701 | animation-name: sbx-reset-in; 702 | -webkit-animation-duration: .15s; 703 | animation-duration: .15s; 704 | } 705 | @-webkit-keyframes sbx-reset-in { 706 | 0% { 707 | -webkit-transform: translate3d(-20%, 0, 0); 708 | transform: translate3d(-20%, 0, 0); 709 | opacity: 0; 710 | } 711 | 100% { 712 | -webkit-transform: none; 713 | transform: none; 714 | opacity: 1; 715 | } 716 | } 717 | @keyframes sbx-reset-in { 718 | 0% { 719 | -webkit-transform: translate3d(-20%, 0, 0); 720 | transform: translate3d(-20%, 0, 0); 721 | opacity: 0; 722 | } 723 | 100% { 724 | -webkit-transform: none; 725 | transform: none; 726 | opacity: 1; 727 | } 728 | } 729 | 730 | 731 | /* spotify */ 732 | .sbx-spotify { 733 | display: inline-block; 734 | position: relative; 735 | width: 200px; 736 | height: 25px; 737 | white-space: nowrap; 738 | box-sizing: border-box; 739 | font-size: 12px; 740 | } 741 | .sbx-spotify__wrapper { 742 | width: 100%; 743 | height: 100%; 744 | } 745 | .sbx-spotify__input { 746 | display: inline-block; 747 | position: absolute; 748 | left: 0 !important; 749 | top: 0 !important; 750 | -webkit-transition: box-shadow .4s ease, background .4s ease; 751 | transition: box-shadow .4s ease, background .4s ease; 752 | border: 0; 753 | border-radius: 13px; 754 | box-shadow: inset 0 0 0 0px #FFFFFF; 755 | background: rgba(255, 255, 255, 0); 756 | padding: 0; 757 | padding-right: 20px; 758 | padding-left: 25px; 759 | width: 100%; 760 | height: 100%; 761 | vertical-align: middle; 762 | white-space: normal; 763 | font-size: inherit; 764 | -webkit-appearance: none; 765 | -moz-appearance: none; 766 | appearance: none; 767 | } 768 | .sbx-spotify__input-placeholder { 769 | display: inline-block; 770 | -webkit-transition: box-shadow .4s ease, background .4s ease; 771 | transition: box-shadow .4s ease, background .4s ease; 772 | border: 0; 773 | border-radius: 13px; 774 | box-shadow: inset 0 0 0 0px #FFFFFF; 775 | background: #FFFFFF; 776 | padding: 0; 777 | padding-right: 20px; 778 | padding-left: 25px; 779 | width: 100%; 780 | height: 100%; 781 | vertical-align: middle; 782 | white-space: normal; 783 | font-size: inherit; 784 | -webkit-appearance: none; 785 | -moz-appearance: none; 786 | appearance: none; 787 | } 788 | .sbx-spotify__input::-webkit-search-decoration, 789 | .sbx-spotify__input::-webkit-search-cancel-button, 790 | .sbx-spotify__input::-webkit-search-results-button, 791 | .sbx-spotify__input::-webkit-search-results-decoration { 792 | display: none; 793 | } 794 | .sbx-spotify__input:hover { 795 | box-shadow: inset 0 0 0 0px #e6e6e6; 796 | } 797 | .sbx-spotify__input:focus, 798 | .sbx-spotify__input:active { 799 | outline: 0; 800 | box-shadow: inset 0 0 0 0px #FFFFFF; 801 | background: rgba(255, 255, 255, 0) 802 | } 803 | .sbx-spotify__input::-webkit-input-placeholder { 804 | color: #AAAAAA; 805 | } 806 | .sbx-spotify__input::-moz-placeholder { 807 | color: #AAAAAA; 808 | } 809 | .sbx-spotify__input:-ms-input-placeholder { 810 | color: #AAAAAA; 811 | } 812 | .sbx-spotify__input::placeholder { 813 | color: #AAAAAA; 814 | } 815 | .sbx-spotify__submit { 816 | position: absolute; 817 | top: 0; 818 | right: inherit; 819 | left: 0; 820 | margin: 0; 821 | border: 0; 822 | border-radius: 12px 0 0 12px; 823 | background-color: rgba(255, 255, 255, 0); 824 | padding: 0; 825 | width: 25px; 826 | height: 100%; 827 | vertical-align: middle; 828 | text-align: center; 829 | font-size: inherit; 830 | -webkit-user-select: none; 831 | -moz-user-select: none; 832 | -ms-user-select: none; 833 | user-select: none; 834 | } 835 | .sbx-spotify__submit::before { 836 | display: inline-block; 837 | margin-right: -4px; 838 | height: 100%; 839 | vertical-align: middle; 840 | content: ''; 841 | } 842 | .sbx-spotify__submit:hover, 843 | .sbx-spotify__submit:active { 844 | cursor: pointer; 845 | } 846 | .sbx-spotify__submit:focus { 847 | outline: 0; 848 | } 849 | .sbx-spotify__submit svg { 850 | width: 17px; 851 | height: 17px; 852 | vertical-align: middle; 853 | fill: #222222; 854 | } 855 | .sbx-spotify__reset { 856 | display: none; 857 | position: absolute; 858 | top: 2px; 859 | right: 2px; 860 | margin: 0; 861 | border: 0; 862 | background: none; 863 | cursor: pointer; 864 | padding: 0; 865 | font-size: inherit; 866 | -webkit-user-select: none; 867 | -moz-user-select: none; 868 | -ms-user-select: none; 869 | user-select: none; 870 | fill: rgba(0, 0, 0, 0.5); 871 | } 872 | .sbx-spotify__reset:focus { 873 | outline: 0; 874 | } 875 | .sbx-spotify__reset svg { 876 | display: block; 877 | margin: 4px; 878 | width: 13px; 879 | height: 13px; 880 | } 881 | .sbx-spotify__input:valid~.sbx-spotify__reset { 882 | display: block; 883 | -webkit-animation-name: sbx-reset-in; 884 | animation-name: sbx-reset-in; 885 | -webkit-animation-duration: .15s; 886 | animation-duration: .15s; 887 | } 888 | @-webkit-keyframes sbx-reset-in { 889 | 0% { 890 | -webkit-transform: translate3d(-20%, 0, 0); 891 | transform: translate3d(-20%, 0, 0); 892 | opacity: 0; 893 | } 894 | 100% { 895 | -webkit-transform: none; 896 | transform: none; 897 | opacity: 1; 898 | } 899 | } 900 | @keyframes sbx-reset-in { 901 | 0% { 902 | -webkit-transform: translate3d(-20%, 0, 0); 903 | transform: translate3d(-20%, 0, 0); 904 | opacity: 0; 905 | } 906 | 100% { 907 | -webkit-transform: none; 908 | transform: none; 909 | opacity: 1; 910 | } 911 | } 912 | .vue-instant__suggestions { 913 | position: absolute; 914 | left: 0; 915 | top: 110%; 916 | margin: 0; 917 | background-color: #fff; 918 | border: 1px solid #D3DCE6; 919 | width: 100%; 920 | padding: 6px 0; 921 | z-index: 10; 922 | border-radius: 2px; 923 | max-height: 280px; 924 | box-sizing: border-box; 925 | overflow: auto; 926 | box-shadow: 0 0 6px 0 rgba(0, 0, 0, .04), 0 2px 4px 0 rgba(0, 0, 0, .12); 927 | margin-top: 3px; 928 | } 929 | .vue-instant__suggestions li { 930 | list-style: none; 931 | line-height: 36px; 932 | padding: 0 10px; 933 | margin: 0; 934 | cursor: pointer; 935 | color: #475669; 936 | font-size: 14px; 937 | white-space: nowrap; 938 | overflow: hidden; 939 | text-overflow: ellipsis; 940 | } 941 | .vue-instant__suggestions li.highlighted__spotify { 942 | background-color: black; 943 | color: #fff; 944 | } 945 | .vue-instant__suggestions li.highlighted__twitter { 946 | background-color: #20a0ff; 947 | color: #fff; 948 | } 949 | .vue-instant__suggestions li.highlighted__google { 950 | background-color: #EEEEEE; 951 | color: black; 952 | } 953 | .vue-instant__suggestions li.highlighted__facebook { 954 | background-color: #3e5da0; 955 | color: #fff; 956 | } 957 | .vue-instant__suggestions li.highlighted__amazon { 958 | background-color: #232F3E; 959 | color: #fff; 960 | } 961 | .el-input-group__append { 962 | border: 0px !important; 963 | } 964 | .sbx-custom__input { 965 | position: absolute; 966 | left: 0 !important; 967 | background: rgba(255, 255, 255, 0) !important; 968 | } 969 | -------------------------------------------------------------------------------- /src/components/VueInstant.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 547 | 548 | 1635 | --------------------------------------------------------------------------------