From e2c8e1daf62c4777f1cffc8b58fd85694f1b4987 Mon Sep 17 00:00:00 2001 From: Jeff Sagal Date: Wed, 9 Mar 2016 15:22:00 -0800 Subject: [PATCH] add params to docs/readme, remove ajax prop --- README.md | 24 +++++++++++++++ dist/build.js | 6 +--- src/App.vue | 65 +++++++++++++++++++++++++++++++++------ src/components/Select.vue | 4 --- 4 files changed, 81 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 4f87296..5391611 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,29 @@ export default { ``` +## Parameters +- `value` Represents the currently selected value(s). Can be `null`, an empty string, or `[]`. If `multiple` is true, the current value will be represented in an array, otherwise it will be a single string or object, depending on what you've passed for `options`. + - twoway: true, + - required: true +- `options` Any array of strings or objects to be used as dropdown choices. Supports `['foo','bar']` & `[{label: 'Foo', value: 'foo'}]`. When using the `[{}]` syntax, the objects in the array can have as many properties as you need, as long as the object contains `value` and `label` keys. + - type: `Array` + - default: `[]` +- `maxHeight` Limit the height of the dropdown menu. + - type: String + - default: '400px' +- `searchable` Toggle filtering of options. + - type: Boolean + - default: true +- `multiple` Equivalent to `multiple` attribute on a ``. + - type: String + - default: ' ' +- `transition` Vue `transition` prop applied to the `.dropdown-menu`. + - type: Boolean + - default: true + ## Todos: - fix layout issues with multiple selections - tags overflow outside `.dropdown` @@ -39,6 +62,7 @@ export default { - `simple` prop that disables `search` and keeps a static `placeholder` regardless of current selection (useful for things like icon button dropdowns) - less opinionated styles / only include css necessary to acheive layout (no colors, etc) - ability to pre-select options when using `[{label: 'Foo', value: 'foo'}]` syntax (already works with `['foo','bar','baz']` syntax +- - more tests!! diff --git a/dist/build.js b/dist/build.js index 945e4e1..2e2e4fc 100644 --- a/dist/build.js +++ b/dist/build.js @@ -10250,7 +10250,7 @@ exports.default = { } }; if (module.exports.__esModule) module.exports = module.exports.default -;(typeof module.exports === "function"? module.exports.options: module.exports).template = "

Vue Select

A simple component that provides similar functionality to Select2 without the overhead of jQuery.

View on GitHub
{{ select | json }}

Live Edit play around with the above vue-select



The options property is watched for changes, and the value is reset anytime the options change. This is useful if you have multiple selection boxes that depend on its ancestors values.
Equivalent to the multiple attribute to a <select>. You'll want to clear any selections you have made before changing this option. It's not one that should be changed after render.
Limit the height of the dropdown menu.
Equivalent to the placeholder attribute.

Installing

Install from GitHub using NPM
Updating

Some versions of NPM don't properly update packages installed from GitHub. In this case, just use the install line above to update.

Usage

  <template>\n    <div id=\"myApp\">\n      <v-select :value.sync=\"selected\" :options=\"options\"></v-select>\n    </div>\n  </template>\n\n  <script>\n    import vSelect from 'vue-select'\n    export default {\n      components: {vSelect},\n\n      data() {\n        return {\n          selected: null,\n          options: ['foo','bar','baz']\n        }\n      }\n    }\n  </script>\n
" +;(typeof module.exports === "function"? module.exports.options: module.exports).template = "

Vue Select

A simple component that provides similar functionality to Select2 without the overhead of jQuery.

View on GitHub
{{ select | json }}

Live Edit play around with the above vue-select



The options property is watched for changes, and the value is reset anytime the options change. This is useful if you have multiple selection boxes that depend on its ancestors values.
Equivalent to the multiple attribute to a <select>. You'll want to clear any selections you have made before changing this option. It's not one that should be changed after render.
Limit the height of the dropdown menu.
Equivalent to the placeholder attribute.

Install & Usage

Install from GitHub using NPM
  <template>\n    <div id=\"myApp\">\n      <v-select :value.sync=\"selected\" :options=\"options\"></v-select>\n    </div>\n  </template>\n\n  <script>\n    import vSelect from 'vue-select'\n    export default {\n      components: {vSelect},\n\n      data() {\n        return {\n          selected: null,\n          options: ['foo','bar','baz']\n        }\n      }\n    }\n  </script>\n

Parameters

  • value Represents the currently selected value(s)
    • type: String
    • required: true
  • maxHeight Limit the height of the dropdown menu
    • type: String
    • default: '400px'
  • searchable Toggle filtering of options
    • type: Boolean
    • default: true
  • multiple Equivalent to multiple attribute on a <select>
    • type: Boolean
    • default: true
  • placeholder Equivalent to placeholder attribute on an <input>
    • type: String
    • default: ''
  • transition Vue transition prop applied to the .dropdown-menu
    • type: Boolean
    • default: true
" },{"./components/Select.vue":36,"./countries.js":37,"./simpleCountries.js":39,"vue":33,"vueify-insert-css":34}],36:[function(require,module,exports){ var __vueify_style__ = require("vueify-insert-css").insert(".dropdown[_v-3d450ab6]{position:relative}.dropdown-toggle[_v-3d450ab6]{display:block;padding:0;background:none;border:1px solid rgba(60,60,60,.26)}.dropdown-toggle[_v-3d450ab6]:active,.dropdown-toggle[_v-3d450ab6]:focus,.dropdown-toggle[_v-3d450ab6]:hover,.open .dropdown-toggle[_v-3d450ab6]:active,.open .dropdown-toggle[_v-3d450ab6]:focus,.open .dropdown-toggle[_v-3d450ab6]:hover{background:none}.open .dropdown-toggle[_v-3d450ab6]{background:none;border-color:#337ab7;border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.dropdown-menu[_v-3d450ab6]{margin:0;width:100%;overflow-y:scroll;border-top:none;border-color:#337ab7;border-top-left-radius:0;border-top-right-radius:0}.alert[_v-3d450ab6]{margin:0;margin-left:6px;padding:.25em}.alert .close[_v-3d450ab6]{float:none;margin-right:0;font-size:20px}input[type=search][_v-3d450ab6]{display:inline-block;border:none;outline:none;margin:0;width:100%;background:none;position:relative;box-shadow:none}input[type=search][_v-3d450ab6]:focus{box-shadow:none}input[type=search].inline[_v-3d450ab6]{width:auto}.dropdown-toggle[_v-3d450ab6]:after{display:block;position:absolute;top:10px;right:10px;display:inline-block;font-family:Glyphicons Halflings;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;content:\"\\e114\";-webkit-transition:all .15s cubic-bezier(1,-.115,.975,.855);transition:all .15s cubic-bezier(1,-.115,.975,.855);-webkit-transition-timing-function:cubic-bezier(1,-.115,.975,.855);transition-timing-function:cubic-bezier(1,-.115,.975,.855)}.open .dropdown-toggle[_v-3d450ab6]:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.form-control[_v-3d450ab6]{border:none}li a[_v-3d450ab6]{cursor:pointer}.active a[_v-3d450ab6]{background:rgba(50,50,50,.1);color:#333}.highlight a[_v-3d450ab6],li:hover a[_v-3d450ab6]{background:#337ab7;color:#fff}") @@ -10298,10 +10298,6 @@ exports.default = { default: function _default() { return []; } - }, - ajax: { - type: String, - default: null } }, diff --git a/src/App.vue b/src/App.vue index 09bf20c..ff4545e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -136,17 +136,10 @@
-

Installing

+

Install & Usage

Install from GitHub using NPM
- -
Updating
-

Some versions of NPM don't properly update packages installed from GitHub. In this case, just use the install line above to update. -

- -
-
-

Usage

+ 
   <template>
       <div id="myApp">
@@ -169,6 +162,60 @@
     </script>
+
+

Parameters

+
    +
  • + value Represents the currently selected value(s) +
      +
    • type: String
      • +
    • required: true
      • +
    +
    • + +
  • + maxHeight Limit the height of the dropdown menu +
      +
    • type: String
      • +
    • default: '400px'
      • +
    +
    • + +
  • + searchable Toggle filtering of options +
      +
    • type: Boolean
      • +
    • default: true
      • +
    +
    • + +
  • + multiple Equivalent to multiple attribute on a <select> +
      +
    • type: Boolean
      • +
    • default: true
      • +
    +
    • + +
  • + placeholder Equivalent to placeholder attribute on an <input> +
      +
    • type: String
      • +
    • default: ''
      • +
    +
    • + +
  • + transition Vue transition prop applied to the .dropdown-menu +
      +
    • type: Boolean
      • +
    • default: true
      • +
    +
    • + +
+ +
diff --git a/src/components/Select.vue b/src/components/Select.vue index ed2e810..a91cc63 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -186,10 +186,6 @@ type: Array, default() { return [] }, }, - ajax: { - type: String, - default: null - } }, data() {