all files / src/components/ Install.vue

72.73% Statements 16/22
66.67% Branches 4/6
20% Functions 1/5
50% Lines 6/12
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179                                                                                                                                                                                                                                                                                                                                                           
// <template>
// <section>
//   <h2 class="page-header" id="install">Install &amp; and Usage</h2>
//   <div class="row row-col-vh">
//     <div class="col-md-7">
//       <install-snippet></install-snippet>
//     </div>
//
//     <div class="col-md-5">
//         <p>The resulting vue-select, and it's value: <v-code lang="json">{{ install | json }}</v-code></p>
//         <v-select :value.sync="install" :options="['foo','bar','baz']"></v-select>
//     </div>
//   </div>
//
//   <h2 class="page-header" id="examples">Examples</h2>
//
//   <h3 class="page-header">Single/Multiple Selection</h3>
//   <div class="row">
//     <div class="col-md-6">
//       <h4>Single Option Select</h4>
//       <pre><v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
//       <v-select :options="countries"></v-select>
//     </div>
//
//     <div class="col-md-6">
//       <h4>Multiple Option Select</h4>
//       <pre><v-code lang="markup">&#x3C;v-select multiple :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
//       <v-select multiple :options="countries"></v-select>
//     </div>
//   </div>
//
//   <h3 class="page-header">Reactive Options</h3>
//
//   <div class="row">
//     <div class="col-md-6">
//         <p>When the list of options provided by the parent changes, vue-select will react as you'd expect.</p>
//         <div style="margin-top:0;" class="radio">
//         <label>
//           <input type="radio" name="reactive-options" v-model="reactive" :value="countries">
//           <v-code lang="markup">&#x3C;v-select :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
//         </label>
//       </div>
//
//       <div class="radio">
//         <label>
//           <input type="radio" name="reactive-options" v-model="reactive" :value="['foo','bar','baz']">
//           <v-code lang="markup">&#x3C;v-select options=&#x22;['foo','bar','baz']&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code>
//         </label>
//       </div>
//     </div>
//
//     <div class="col-md-6">
//       <v-select :options="reactive"></v-select>
//     </div>
//   </div>
//
//   <h3 class="page-header">Two-Way Value Syncing</h3>
//   <div class="row">
//     <div class="col-md-6">
//       <p>The most common use case for vue-select is being able to sync the components value with a parent component. The <code>value</code> property supports two-way data binding to accomplish this.</p>
//       <p>The <code>.sync</code> data-binding modifier is completely optional. You may use <code>value</code> without a two-way binding to preselect options.</p>
//       <p>Here we have preselected 'Canada' by setting <code>syncedVal: 'Canada'</code> on the parent component. The buttons below demonstrate how you can set the <code>value</code> from the parent.</p>
//
//       <p>Current value: <v-code>{{ syncedVal | json }}</v-code></p>
//     </div>
//
//     <div class="col-md-6">
//       <div class="form-group">
//         <pre><v-code lang="markup">&#x3C;v-select :value.sync=&#x22;syncedVal&#x22; :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
//       </div>
//       <div class="form-group">
//       <v-select :options="simple" :value.sync="syncedVal"></v-select>
//       </div>
//
//       <div class="form-group">
//       <button @click="syncedVal = 'United States'" class="btn btn-default">Set to United States</button>
//       <button @click="syncedVal = 'Canada'" class="btn btn-default">Set to Canada</button>
//       </div>
//     </div>
//   </div>
//
//   <h3 class="page-header">Custom Labels</h3>
//   <div class="row">
//     <div class="col-md-6">
//       <p>By default when the <code>options</code> array contains objects, <code>vue-select</code> looks for the <code>label</code> key for display. If your data source doesn't contain that key, you can set your own using the <code>label</code> prop.</p>
//       <p>On this page, the list of countries used in the examples contains <code>value</code> and <code>label</code> properties: <v-code lang="json">{value: "CA", label: "Canada"}</v-code>. In this example, we'll display the country code instead of the label.</p>
//     </div>
//
//     <div class="col-md-6">
//       <pre><v-code lang="markup">&#x3C;v-select label=&#x22;value&#x22; :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
//       <v-select :options="countries" label="value"></v-select>
//     </div>
//   </div>
//
//   <h3 class="page-header">On-Change Callback <small>Vuex Compatibility</small></h3>
//   <div class="row">
//     <div class="col-md-6">
//       <p>vue-select provides an <code>onChange</code> property that accepts a callback function. This function is passed the currently selected value(s) as it's only parameter.</p>
//       <p>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.</p>
//
//       <div class="form-inline">
//         <div class="radio">
//           <label>
//             <input type="radio" v-model="callback" value="console"> <code>console.log(val)</code>
//           </label>
//         </div>
//
//         <div class="radio">
//           <label>
//             <input type="radio" v-model="callback" value="alert"> <code>alert(val)</code>
//           </label>
//         </div>
//       </div>
//     </div>
//
//     <div class="col-md-6">
//       <pre><v-code lang="markup">&#x3C;v-select on-change=&#x22;consoleCallback&#x22; :options=&#x22;countries&#x22;&#x3E;&#x3C;/v-select&#x3E;</v-code></pre>
//       <pre><v-code lang="javascript">methods: {
//   consoleCallback(val) {
//     console.dir(JSON.stringify(val))
//   },
//
//   alertCallback(val) {
//     alert(JSON.stringify(val))
//   }
// }</v-code></pre>
//       <v-select :options="countries" :on-change="getCallback"></v-select>
//     </div>
//   </div>
// </section>
// </template>
//
// <style type="scss">
//
// </style>
//
// <script>
import countries from '../countries/advanced'
import simple from '../countries/simple'
import vSelect from './Select.vue'
import vCode from './Code.vue'
import InstallSnippet from './snippets/InstallSnippet.vue'
export default {
  components: {vSelect,vCode,InstallSnippet},
  data () {
    return {
      countries,
      simple,
      callback: 'console',
      reactive: null,
      install: null,
      syncedVal: 'Canada'
    }
  },
 
  methods: {
    consoleCallback(val) {
      console.dir(JSON.stringify(val))
    },
 
    alertCallback(val) {
      alert(JSON.stringify(val))
    }
  },
 
  computed: {
    getCallback() {
      if( this.callback === 'alert' ) {
        return this.alertCallback
      }
 
      return this.consoleCallback
    }
  }
}
// </script>
/* generated by vue-loader */