diff --git a/README.md b/README.md index 7a3008c..f913f9a 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ -# vue-select [![Build Status](https://travis-ci.org/sagalbot/vue-select.svg?branch=master)](https://travis-ci.org/sagalbot/vue-select) [![Code Climate Rating](https://img.shields.io/codeclimate/github/sagalbot/vue-select.svg?style=flat-square)](https://codeclimate.com/github/sagalbot/vue-select) [![Code Coverage](https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square)](https://codeclimate.com/github/sagalbot/vue-select) [![No Dependencies](https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square)](https://gemnasium.com/github.com/sagalbot/vue-select) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square) ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square) +# vue-select [![Build Status](https://travis-ci.org/sagalbot/vue-select.svg?branch=master)](https://travis-ci.org/sagalbot/vue-select) [![Code Coverage](https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square)](https://codeclimate.com/github/sagalbot/vue-select) [![No Dependencies](https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square)](https://gemnasium.com/github.com/sagalbot/vue-select) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square) ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square) + +> A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery. + +Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js component provides similar functionality without the extra overhead of jQuery, while providing the same awesome data-binding features you expect from Vue. Vue-select has no JavaScript dependencies other than Vue, and is designed to mimic [Select2](https://github.com/select2/select2). -> Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js component provides similar functionality without the extra overhead of jQuery, while providing the same awesome data-binding features you expect from Vue. Vue-select has no JavaScript dependencies other than Vue, and is designed to mimic [Select2](https://github.com/select2/select2). #### Features diff --git a/build/build.js b/build/build.js index b5afb47..64db98a 100644 --- a/build/build.js +++ b/build/build.js @@ -6,13 +6,14 @@ var path = require('path') var config = require('../config') var ora = require('ora') var webpack = require('webpack') +var ghpages = require('gh-pages') var webpackConfig = require('./webpack.prod.conf') var umdConfig = require('./webpack.umd.conf') console.log( - ' Tip:\n' + - ' Built files are meant to be served over an HTTP server.\n' + - ' Opening index.html over file:// won\'t work.\n' + ' Tip:\n' + + ' Built files are meant to be served over an HTTP server.\n' + + ' Opening index.html over file:// won\'t work.\n' ) var spinner = ora('building for production...') @@ -27,15 +28,25 @@ cp('-R', 'static/', assetsPath) * Build the /dist/ folder (demo site) */ webpack(webpackConfig, function (err, stats) { - spinner.stop() - if (err) throw err - process.stdout.write(stats.toString({ - colors: true, - modules: false, - children: false, - chunks: false, - chunkModules: false - }) + '\n') + spinner.stop() + if (err) throw err + process.stdout.write(stats.toString({ + colors: true, + modules: false, + children: false, + chunks: false, + chunkModules: false + }) + '\n') + + // $ npm run build publish + // This will publish /dist/ to the gh-pages + if (( process.argv.indexOf('publish') > 1 )) { + spinner = ora('Publishing to GitHub Pages...').start() + ghpages.publish(path.join(__dirname, '../dist'), function (err) { + spinner.stop() + if (err) throw err + }); + } }) /** diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 2a6dbf2..21667d5 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -5,7 +5,7 @@ var projectRoot = path.resolve(__dirname, '../') module.exports = { entry: { - app: './src/main.js' + app: './docs/main.js' }, output: { path: config.build.assetsRoot, @@ -17,8 +17,9 @@ module.exports = { fallback: [path.join(__dirname, '../node_modules')], alias: { 'src': path.resolve(__dirname, '../src'), - 'assets': path.resolve(__dirname, '../src/assets'), - 'components': path.resolve(__dirname, '../src/components') + 'assets': path.resolve(__dirname, '../docs/assets'), + 'mixins': path.resolve(__dirname, '../src/mixins'), + 'components': path.resolve(__dirname, '../docs/components') } }, resolveLoader: { @@ -45,7 +46,7 @@ module.exports = { loader: 'vue-html' }, { - test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, + test: /\.(png|jpe?g|gif)(\?.*)?$/, loader: 'url', query: { limit: 10000, @@ -53,7 +54,7 @@ module.exports = { } }, { - test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/, loader: 'url', query: { limit: 10000, diff --git a/config/index.js b/config/index.js index 7414499..423ce77 100644 --- a/config/index.js +++ b/config/index.js @@ -6,8 +6,8 @@ module.exports = { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), - assetsSubDirectory: 'static', - assetsPublicPath: '/', + assetsSubDirectory: '', + assetsPublicPath: ( process.argv.indexOf('publish') > 1 ) ? 'http://sagalbot.github.io/vue-select/' : '/', productionSourceMap: true }, dev: { diff --git a/docs/Docs.vue b/docs/Docs.vue new file mode 100644 index 0000000..e2e1dc4 --- /dev/null +++ b/docs/Docs.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/assets/fonts/octicons.eot b/docs/assets/fonts/octicons.eot similarity index 100% rename from src/assets/fonts/octicons.eot rename to docs/assets/fonts/octicons.eot diff --git a/src/assets/fonts/octicons.scss b/docs/assets/fonts/octicons.scss similarity index 100% rename from src/assets/fonts/octicons.scss rename to docs/assets/fonts/octicons.scss diff --git a/src/assets/fonts/octicons.svg b/docs/assets/fonts/octicons.svg similarity index 100% rename from src/assets/fonts/octicons.svg rename to docs/assets/fonts/octicons.svg diff --git a/src/assets/fonts/octicons.ttf b/docs/assets/fonts/octicons.ttf similarity index 100% rename from src/assets/fonts/octicons.ttf rename to docs/assets/fonts/octicons.ttf diff --git a/src/assets/fonts/octicons.woff b/docs/assets/fonts/octicons.woff similarity index 100% rename from src/assets/fonts/octicons.woff rename to docs/assets/fonts/octicons.woff diff --git a/src/assets/scss/_cyan_theme.scss b/docs/assets/scss/_cyan_theme.scss similarity index 100% rename from src/assets/scss/_cyan_theme.scss rename to docs/assets/scss/_cyan_theme.scss diff --git a/src/assets/scss/_demo.scss b/docs/assets/scss/_demo.scss similarity index 98% rename from src/assets/scss/_demo.scss rename to docs/assets/scss/_demo.scss index 3fa118c..e505c06 100644 --- a/src/assets/scss/_demo.scss +++ b/docs/assets/scss/_demo.scss @@ -49,13 +49,15 @@ p.lead { .btn-outline { background: none; - padding: 10px 16px; - font-size: 18px; line-height: 1.3333333; border-radius: 6px; - border: 3px solid #91ddec; + border: 2px solid #91ddec; color: #147688; + &.btn-lg { + border-width: 3px; + } + &:hover { border-color: rgb(65, 184, 131); background-color: rgba(65, 184, 131, 0.67); @@ -83,4 +85,13 @@ p.lead { .selected-tag .close { font-family: "Helvetica Neue", "Helvetica"; font-weight: 400; +} + +.accolades a { + margin-left: 0; + margin-right: 5px; +} + +.doc-row { + padding: 2em 0; } \ No newline at end of file diff --git a/src/assets/scss/_octicons.scss b/docs/assets/scss/_octicons.scss similarity index 97% rename from src/assets/scss/_octicons.scss rename to docs/assets/scss/_octicons.scss index 7ead05e..8cc4f84 100644 --- a/src/assets/scss/_octicons.scss +++ b/docs/assets/scss/_octicons.scss @@ -1,9 +1,9 @@ @font-face { font-family: 'octicons'; - src: url('./assets/fonts/octicons.eot?#iefix') format('embedded-opentype'), - url('./assets/fonts/octicons.woff') format('woff'), - url('./assets/fonts/octicons.ttf') format('truetype'), - url('./assets/fonts/octicons.svg#octicons') format('svg'); + src: url('~assets/fonts/octicons.eot?#iefix') format('embedded-opentype'), + url('~assets/fonts/octicons.woff') format('woff'), + url('~assets/fonts/octicons.ttf') format('truetype'), + url('~assets/fonts/octicons.svg#octicons') format('svg'); font-weight: normal; font-style: normal; } diff --git a/src/assets/scss/_prism.scss b/docs/assets/scss/_prism.scss similarity index 100% rename from src/assets/scss/_prism.scss rename to docs/assets/scss/_prism.scss diff --git a/src/assets/scss/_variables.scss b/docs/assets/scss/_variables.scss similarity index 100% rename from src/assets/scss/_variables.scss rename to docs/assets/scss/_variables.scss diff --git a/src/components/Code.vue b/docs/components/Code.vue similarity index 100% rename from src/components/Code.vue rename to docs/components/Code.vue diff --git a/src/components/Install.vue b/docs/components/Examples.vue similarity index 68% rename from src/components/Install.vue rename to docs/components/Examples.vue index 0ebeed8..48341fd 100644 --- a/src/components/Install.vue +++ b/docs/components/Examples.vue @@ -14,48 +14,52 @@ - -
-
-

Single Option Select

-
<v-select :options="countries"></v-select>
- -
- -
-

Multiple Option Select

-
<v-select multiple :options="countries"></v-select>
- -
-
- - - -
-
-

When the list of options provided by the parent changes, vue-select will react as you'd expect.

-
- +
+ +
+
+

Single Option Select

+
<v-select :options="countries"></v-select>
+
-
- +
+

Multiple Option Select

+
<v-select multiple :options="countries"></v-select>
+
+
-
- +
+ +
+
+

When the list of options provided by the parent changes, vue-select will react as you'd expect.

+
+ +
+ +
+ +
+
+ +
+ +
-
+ - -
+
+ +

The most common use case for vue-select is being able to sync the components value with a parent component. The value property supports two-way data binding to accomplish this.

The .sync data-binding modifier is completely optional. You may use value without a two-way binding to preselect options.

@@ -78,9 +82,11 @@
+ - -
+
+ +

By default when the options array contains objects, vue-select looks for the label key for display. If your data source doesn't contain that key, you can set your own using the label prop.

On this page, the list of countries used in the examples contains value and label properties: {value: "CA", label: "Canada"}. In this example, we'll display the country code instead of the label.

@@ -91,9 +97,11 @@
+
- -
+
+ +

vue-select provides an onChange property that accepts a callback function. This function is passed the currently selected value(s) as it's only parameter.

This is very useful when integrating with Vuex, as it will allow your to trigger an action to update your vuex state object. Choose a callback and see it in action.

@@ -127,13 +135,12 @@
+
+ + - - \ No newline at end of file diff --git a/docs/components/GithubSearchBasic.vue b/docs/components/GithubSearchBasic.vue new file mode 100644 index 0000000..ec67693 --- /dev/null +++ b/docs/components/GithubSearchBasic.vue @@ -0,0 +1,38 @@ + + + \ No newline at end of file diff --git a/src/components/Params.vue b/docs/components/Params.vue similarity index 100% rename from src/components/Params.vue rename to docs/components/Params.vue diff --git a/docs/components/snippets/Ajax.vue b/docs/components/snippets/Ajax.vue new file mode 100644 index 0000000..c89641c --- /dev/null +++ b/docs/components/snippets/Ajax.vue @@ -0,0 +1,130 @@ + + + + + \ No newline at end of file diff --git a/docs/components/snippets/AjaxExample.vue b/docs/components/snippets/AjaxExample.vue new file mode 100644 index 0000000..00318bd --- /dev/null +++ b/docs/components/snippets/AjaxExample.vue @@ -0,0 +1,31 @@ + + + \ No newline at end of file diff --git a/docs/components/snippets/AjaxProps.vue b/docs/components/snippets/AjaxProps.vue new file mode 100644 index 0000000..be20eff --- /dev/null +++ b/docs/components/snippets/AjaxProps.vue @@ -0,0 +1,28 @@ + + + \ No newline at end of file diff --git a/src/components/snippets/InstallSnippet.vue b/docs/components/snippets/InstallSnippet.vue similarity index 100% rename from src/components/snippets/InstallSnippet.vue rename to docs/components/snippets/InstallSnippet.vue diff --git a/src/countries/advanced.js b/docs/data/advanced.js similarity index 100% rename from src/countries/advanced.js rename to docs/data/advanced.js diff --git a/src/countries/simple.js b/docs/data/simple.js similarity index 100% rename from src/countries/simple.js rename to docs/data/simple.js diff --git a/docs/main.js b/docs/main.js new file mode 100644 index 0000000..435b22a --- /dev/null +++ b/docs/main.js @@ -0,0 +1,49 @@ +import 'prismjs' +import Vue from 'vue' +import App from './Docs.vue' +import store from './vuex/store' +import Resource from 'vue-resource' +import vSelect from '../src/components/Select.vue' +import vCode from './components/Code.vue' + +Vue.use(Resource) + +Vue.component('v-select', vSelect) +Vue.component('v-code', vCode) + +Vue.filter('score', function (value) { + return Math.round(value) +}) + +Vue.config.debug = true +Vue.config.devtools = true + +import { setSelected, toggleMultiple, setPlaceholder, toggleOptionType } from './vuex/actions' + + +/* eslint-disable no-new */ +new Vue({ + el: 'body', + store, + components: { App }, + vuex: { + getters: { + placeholder (store) { + return store.placeholder + }, + selected (store) { + return store.selected + }, + type (store) { + return store.optionType + }, + options (store) { + return store.options[store.optionType] + }, + multiple (store) { + return store.multiple + } + }, + actions: { setSelected, toggleMultiple, setPlaceholder, toggleOptionType } + } +}) diff --git a/src/vuex/actions.js b/docs/vuex/actions.js similarity index 100% rename from src/vuex/actions.js rename to docs/vuex/actions.js diff --git a/src/vuex/store.js b/docs/vuex/store.js similarity index 88% rename from src/vuex/store.js rename to docs/vuex/store.js index 9a964be..6dd9207 100644 --- a/src/vuex/store.js +++ b/docs/vuex/store.js @@ -10,8 +10,8 @@ const state = { multiple: true, maxHeight: '400px', options: { - advanced: require('../countries/advanced.js'), - simple: require('../countries/simple.js'), + advanced: require('../data/advanced.js'), + simple: require('../data/simple.js'), }, optionType: 'advanced' } diff --git a/index.html b/index.html index ae23730..e474a1c 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - Vue Select | VueJS Select2/Chosen Component + Vue Select | VueJS Select2 Component @@ -11,19 +11,74 @@ - + + + - + + + + + - - - - - - + +
+
+
+ +

Vue Select

+ +

+ Build Status + Code Coverage + No Dependencies + MIT License + Current Release +

+ +

A native Vue.js select component that provides similar functionality to Select2/Chosen without the overhead of jQuery.

+ + + + +
+
+
    +
  • Fully Reactive
  • +
  • Tagging Support v1.1.0
  • +
  • Works with Vuex
  • +
  • Zero dependencies
  • +
+
+
+
    +
  • +95% Test Coverage
  • +
  • Select Single/Multiple
  • +
  • Typeahead Suggestions
  • +
  • Bootstrap Friendly Markup
  • +
+
+
+ + View on GitHub +
+
+ + Install, Examples & Documentation + + +
diff --git a/src/assets/fonts/octicons-local.ttf b/src/assets/fonts/octicons-local.ttf deleted file mode 100644 index 6f3edd6..0000000 Binary files a/src/assets/fonts/octicons-local.ttf and /dev/null differ diff --git a/src/components/Select.vue b/src/components/Select.vue index e8e0989..4cf2d01 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -1,5 +1,5 @@