From 046d4ced343b847be0bca5ca26a9de9148bcb562 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Sun, 12 Aug 2018 18:16:10 -0700
Subject: [PATCH] Update yarn dev command and environment

---
 dev/Dev.vue  | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++
 dev/dev.html |  83 --------------------------------
 dev/dev.js   |  52 ++-------------------
 package.json |   4 +-
 4 files changed, 137 insertions(+), 132 deletions(-)
 create mode 100644 dev/Dev.vue
 delete mode 100644 dev/dev.html

diff --git a/dev/Dev.vue b/dev/Dev.vue
new file mode 100644
index 0000000..c6d69c4
--- /dev/null
+++ b/dev/Dev.vue
@@ -0,0 +1,130 @@
+<template>
+  <div id="app">
+    <v-select placeholder="default" :options="options"></v-select>
+    <v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
+    <v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></v-select>
+    <v-select placeholder="multiple" multiple :options="options"></v-select>
+    <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
+    <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
+    <v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
+    <v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
+    <v-select placeholder="searchable=false" :options="options" :searchable="false"></v-select>
+    <v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
+    <v-select placeholder="custom option template" :options="options" multiple>
+      <template slot="selected-option" slot-scope="option">
+        {{option.label}}
+      </template>
+      <template slot="option" slot-scope="option">
+        {{option.label}} ({{option.value}})
+      </template>
+    </v-select>
+    <v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple>
+      <template slot="selected-option" slot-scope="option">
+        {{option.label}}
+      </template>
+      <template slot="option" slot-scope="option">
+        {{option.label}}
+      </template>
+    </v-select>
+    <v-select multiple placeholder="custom label template" :options="options">
+            <span
+                    slot="selected-option-container"
+                    slot-scope="props"
+                    class="selected-tag"
+            >
+                {{ props.option.label }} ({{ props.option.value }})
+              <button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </span>
+    </v-select>
+    <v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
+    <v-select placeholder="disabled" disabled  value="disabled"></v-select>
+    <v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
+    <v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
+    <v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">
+      <template slot="option" scope="option">
+        <strong>{{ option.title }}</strong><br>
+        <em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
+      </template>
+    </v-select>
+  </div>
+</template>
+
+<script>
+import Fuse from "fuse.js";
+import debounce from "lodash/debounce";
+import vSelect from "../src/components/Select.vue";
+import countries from "./data/countryCodes";
+import fuseSearchOptions from "./data/books";
+
+export default {
+  components: { vSelect },
+  data() {
+    return {
+      placeholder: "placeholder",
+      value: null,
+      options: countries,
+      ajaxRes: [],
+      people: [],
+      fuseSearchOptions
+    };
+  },
+  methods: {
+    search(search, loading) {
+      loading(true);
+      this.getRepositories(search, loading, this);
+    },
+    searchPeople(search, loading) {
+      loading(true);
+      this.getPeople(loading, this);
+    },
+    getPeople: debounce((loading, vm) => {
+      vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
+        vm.people = res.data.data;
+        loading(false);
+      });
+    }, 250),
+    getRepositories: debounce((search, loading, vm) => {
+      vm.$http
+        .get(`https://api.github.com/search/repositories?q=${search}`)
+        .then(res => {
+          vm.ajaxRes = res.data.items;
+          loading(false);
+        });
+    }, 250),
+    fuseSearch(options, search) {
+      return new Fuse(options, {
+        keys: ["title", "author.firstName", "author.lastName"]
+      }).search(search);
+    }
+  }
+};
+</script>
+
+<style>
+/*@import "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css";*/
+/*@import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css";*/
+/*@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";*/
+/*@import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css";*/
+
+body,
+html {
+  font-family: -apple-system, sans-serif;
+}
+
+#app {
+  height: 95vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  align-content: center;
+}
+
+.v-select {
+  width: 25em;
+  margin: 1em;
+}
+</style>
diff --git a/dev/dev.html b/dev/dev.html
deleted file mode 100644
index 165c863..0000000
--- a/dev/dev.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <title>Vue Select Dev</title>
-    <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
-    <!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
-    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
-    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
-    <style>
-
-        #app {
-            height: 95vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: flex-start;
-            flex-wrap: wrap;
-            align-content: center;
-        }
-
-        .v-select {
-            width: 25em;
-            margin: 1em;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-        <v-select placeholder="default" :options="options"></v-select>
-        <v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
-        <v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></v-select>
-        <v-select placeholder="multiple" multiple :options="options"></v-select>
-        <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
-        <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
-        <v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
-        <v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
-        <v-select placeholder="searchable=false" :options="options" :searchable="false"></v-select>
-        <v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
-        <v-select placeholder="custom option template" :options="options" multiple>
-            <template slot="selected-option" slot-scope="option">
-                {{option.label}}
-            </template>
-            <template slot="option" slot-scope="option">
-                {{option.label}} ({{option.value}})
-            </template>
-        </v-select>
-        <v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple>
-            <template slot="selected-option" slot-scope="option">
-                {{option.label}}
-            </template>
-            <template slot="option" slot-scope="option">
-                {{option.label}}
-            </template>
-        </v-select>
-        <v-select multiple placeholder="custom label template" :options="options">
-            <span
-                    slot="selected-option-container"
-                    slot-scope="props"
-                    class="selected-tag"
-            >
-                {{ props.option.label }} ({{ props.option.value }})
-              <button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">
-                <span aria-hidden="true">&times;</span>
-              </button>
-            </span>
-        </v-select>
-        <v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
-        <v-select placeholder="disabled" disabled  value="disabled"></v-select>
-        <v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
-        <v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
-        <v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">
-            <template slot="option" scope="option">
-                <strong>{{ option.title }}</strong><br>
-                <em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
-            </template>
-        </v-select>
-    </div>
-</body>
-
-</html>
diff --git a/dev/dev.js b/dev/dev.js
index 83e4580..658e484 100644
--- a/dev/dev.js
+++ b/dev/dev.js
@@ -1,50 +1,8 @@
-import Vue from 'vue'
-import Fuse from 'fuse.js'
-import debounce from 'lodash/debounce'
-import resource from 'vue-resource'
-import vSelect from '../src/components/Select.vue'
-import countries from './data/countryCodes'
-import fuseSearchOptions from './data/books'
+import Vue from "vue";
+import Dev from "./Dev.vue";
 
-Vue.use(resource)
-Vue.component('v-select', vSelect)
+Vue.config.productionTip = false;
 
-/* eslint-disable no-new */
 new Vue({
-  el: '#app',
-  data: {
-    placeholder: "placeholder",
-    value: null,
-    options: countries,
-    ajaxRes: [],
-    people: [],
-    fuseSearchOptions
-  },
-  methods: {
-    search(search, loading) {
-      loading(true);
-      this.getRepositories(search, loading, this)
-    },
-    searchPeople(search, loading) {
-      loading(true)
-      this.getPeople(loading, this)
-    },
-    getPeople: debounce((loading, vm) => {
-      vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
-        vm.people = res.data.data
-        loading(false)
-      })
-    }, 250),
-    getRepositories: debounce((search, loading, vm) => {
-      vm.$http.get(`https://api.github.com/search/repositories?q=${search}`).then(res => {
-        vm.ajaxRes = res.data.items;
-        loading(false)
-      })
-    }, 250),
-    fuseSearch(options, search) {
-      return new Fuse(options, {
-        keys: ['title', 'author.firstName', 'author.lastName'],
-      }).search(search);
-    }
-  }
-});
\ No newline at end of file
+  render: h => h(Dev)
+}).$mount("#app");
diff --git a/package.json b/package.json
index 6c35976..d948fa3 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vue-cli-service serve ./dev/dev.js",
+    "build": "vue-cli-service build --target lib ./src/index.js",
     "lint": "vue-cli-service lint",
     "test:unit": "vue-cli-service test:unit"
   },