1.2.0

Author: iliyaZelenko

.gitignore

@@ -1,8 +1,8 @@
 .DS_Store
-node_modules
+/node_modules
 #/dist
-gh-pages-src
-gh-pages-build
+#/gh-pages-src
+/gh-pages-build
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/

README.md

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-page-wrap">
     <div>
-      <h1 style="text-align: center;">Usage Example 2</h1>
+      <h1 style="text-align: center;">Async Data Example</h1>
 
       <p>
         This example shows how to work with asynchronous data through REST API.
@@ -62,7 +62,7 @@
 </template>
 
 <script>
-import { CoolSelect } from '../../../src/main'
+import { CoolSelect } from 'vue-cool-select'
 
 export default {
   components: { CoolSelect },

dist/vue-cool-select.common.js

@@ -0,0 +1,34 @@
+<template>
+  <div class="demo-page-wrap">
+    <div>
+      <h1 style="text-align: center;">Simple Example</h1>
+
+      <b>Selected:</b> {{ selected || 'not chosen' }}.
+      <br><br>
+
+      <cool-select
+        v-model="selected"
+        :items="items"
+        placeholder="Select name"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { CoolSelect } from 'vue-cool-select'
+
+export default {
+  components: { CoolSelect },
+  data: () => ({
+    selected: null,
+    items: [
+      'Anton',
+      'Andrey',
+      'Sasha',
+      'Vladimir',
+      'Dima'
+    ]
+  })
+}
+</script>

dist/vue-cool-select.common.js.map

@@ -1,7 +1,7 @@
 <template>
   <div class="demo-page-wrap">
     <div>
-      <h1 style="text-align: center;">Usage Example 1</h1>
+      <h1 style="text-align: center;">Timezones Example</h1>
 
       <b>Selected timezone:</b> {{ selectedTimezone || 'not chosen' }}.
       <br><br>
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import countries from '../../countries'
+import countries from './countries'
 import { CoolSelect } from 'vue-cool-select'
 
 export default {
@@ -77,7 +77,7 @@ export default {
   methods: {
     getFlag (flagName) {
       try {
-        return require(`./flags/${flagName.toLowerCase()}.svg`)
+        return require(`./Timezones/flags`)
       } catch (e) {
         return require('./flags/undefined.svg')
       }

dist/vue-cool-select.umd.js

@@ -0,0 +1,42 @@
+<template>
+  <div class="demo-page-wrap">
+    <div>
+      <h1 style="text-align: center;">Validation Example</h1>
+
+      <b>Selected:</b> {{ selected || 'not chosen' }}.
+      <br><br>
+
+      <cool-select
+        v-model="selected"
+        :items="items"
+        :error-message="errorMessage"
+        placeholder="Select name"
+        @blur="validate"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { CoolSelect } from 'vue-cool-select'
+
+export default {
+  components: { CoolSelect },
+  data: () => ({
+    selected: null,
+    items: [
+      'Anton',
+      'Andrey',
+      'Sasha',
+      'Vladimir',
+      'Dima'
+    ],
+    errorMessage: null
+  }),
+  methods: {
+    validate () {
+      this.errorMessage = !this.selected ? 'This is required field!' : null
+    }
+  }
+}
+</script>

dist/vue-cool-select.umd.js.map

@@ -0,0 +1,91 @@
+<template>
+  <div id="app">
+    <p style="text-align: center; font-size: 20px;">
+      <router-link :to="{ name: 'Example1' }">
+        Countries example
+      </router-link>
+      |
+      <router-link :to="{ name: 'Example2' }">
+        Async search example
+      </router-link>
+      |
+      <router-link :to="{ name: 'Example3' }">
+        Simple example
+      </router-link>
+      |
+      <router-link :to="{ name: 'Example4' }">
+        Validation example
+      </router-link>
+
+      <br>
+
+      <router-link :to="{ name: 'Docs' }">
+        Documentation 🗎
+      </router-link>
+    </p>
+
+    <!--Роуты для разработки-->
+    <p
+      v-if="env === 'development'"
+      style="text-align: center; font-size: 20px;"
+    >
+      <router-link to="/dev/">
+        Dev 1
+      </router-link>
+      |
+      <router-link to="/dev/2">
+        Dev 2
+      </router-link>
+      |
+      <router-link to="/dev/3">
+        Dev 3
+      </router-link>
+      |
+      <router-link to="/dev/4">
+        Dev 4
+      </router-link>
+
+      <switch-theme v-if="$route.fullPath.includes('dev')" />
+    </p>
+
+    <router-view/>
+  </div>
+</template>
+
+<script>
+import SwitchTheme from './SwitchTheme.vue'
+
+export default {
+  components: { SwitchTheme },
+  data: () => ({
+    env: process.env.NODE_ENV
+  })
+}
+</script>
+
+<style>
+  .example-frame {
+    width: 100%;
+    height: 800px;
+    border:0;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  /* Page styles (no need) */
+  .demo-page-wrap {
+    display: flex;
+    justify-content: center;
+    /*align-items: center;*/
+    height: 100vh;
+  }
+
+  .demo-page-wrap > div {
+    width: 450px;
+    height: 100%;
+  }
+
+  body {
+    margin: 0;
+  }
+</style>

dist/vue-cool-select.umd.min.js

@@ -0,0 +1,83 @@
+<template>
+  <div class="theme-wrapp">
+    <template
+      v-for="(theme, i) of themes"
+    >
+      <div
+        :key="theme.name"
+        class="theme"
+        @click="changeTheme(theme.name)"
+      >
+        <img :src="theme.img">
+        <img
+          v-if="theme.name === currentTheme"
+          src="https://cdn3.iconfinder.com/data/icons/flat-actions-icons-9/792/Tick_Mark_Dark-128.png"
+          style="width: 20px; position: absolute;  transform: translateX(-5px) translateY(-5px)"
+        >
+        <br>
+        {{ theme.name }}
+      </div>
+
+      <span
+        v-if="i !== themes.length - 1"
+        :key="i"
+      >
+        or
+      </span>
+    </template>
+
+  </div>
+</template>
+
+<script>
+import { getTheme, setTheme } from './themeHelpers'
+
+export default {
+  data: () => ({
+    themes: [
+      {
+        name: 'bootstrap',
+        img: 'http://wordyblend.com/wp-content/uploads/2017/03/bootstrap-solid.jpg'
+      },
+      {
+        name: 'material-design',
+        img: 'https://upload.wikimedia.org/wikipedia/commons/c/c7/Google_Material_Design_Logo.svg'
+      }
+    ]
+  }),
+  computed: {
+    currentTheme: getTheme
+  },
+  methods: {
+    changeTheme: setTheme
+  }
+}
+</script>
+
+<style>
+  .theme-wrapp {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 120px;
+    margin: 30px 0;
+  }
+
+  .theme {
+    text-align: center;
+    width: 120px;
+  }
+
+  .theme img {
+    width: 50%;
+  }
+
+  .theme:hover {
+    font-weight: bold;
+    cursor: pointer;
+  }
+
+  .theme:hover img {
+    width: 55%;
+  }
+</style>

dist/vue-cool-select.umd.min.js.map

@@ -0,0 +1,5 @@
+{
+  "data": [
+    {"name":"Africa/Conakry","countryCode":"GIN","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Lome","countryCode":"TGO","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Atlantic/Reykjavik","countryCode":"ISL","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Monrovia","countryCode":"LBR","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"America/Scoresbysund","countryCode":"GRL","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"America/Danmarkshavn","countryCode":"GRL","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Bissau","countryCode":"GNB","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Banjul","countryCode":"GMB","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Bamako","countryCode":"MLI","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Dakar","countryCode":"SEN","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Ouagadougou","countryCode":"BFA","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Accra","countryCode":"GHA","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Freetown","countryCode":"SLE","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Sao_Tome","countryCode":"STP","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Atlantic/Azores","countryCode":"PRT","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Abidjan","countryCode":"CIV","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Africa/Nouakchott","countryCode":"MRT","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"Atlantic/St_Helena","countryCode":"SHN","offset":"(UTC+00:00)","offsetPrefix":"+"},{"name":"America/North_Dakota/Beulah","countryCode":"USA","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Monterrey","countryCode":"MEX","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Bogota","countryCode":"COL","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Matamoros","countryCode":"MEX","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Jamaica","countryCode":"JAM","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Mexico_City","countryCode":"MEX","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Rio_Branco","countryCode":"BRA","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"Pacific/Easter","countryCode":"CHL","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Merida","countryCode":"MEX","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Eirunepe","countryCode":"BRA","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/North_Dakota/New_Salem","countryCode":"USA","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Atikokan","countryCode":"CAN","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Bahia_Banderas","countryCode":"MEX","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Cancun","countryCode":"MEX","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Guayaquil","countryCode":"ECU","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Winnipeg","countryCode":"CAN","offset":"(UTC-05:00)","offsetPrefix":"-"},{"name":"America/Regina","countryCode":"CAN","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Yellowknife","countryCode":"CAN","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Swift_Current","countryCode":"CAN","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"Pacific/Galapagos","countryCode":"ECU","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Costa_Rica","countryCode":"CRI","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Tegucigalpa","countryCode":"HND","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Denver","countryCode":"USA","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Cambridge_Bay","countryCode":"CAN","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Managua","countryCode":"NIC","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Belize","countryCode":"BLZ","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Inuvik","countryCode":"CAN","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Ojinaga","countryCode":"MEX","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Guatemala","countryCode":"GTM","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/El_Salvador","countryCode":"SLV","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Mazatlan","countryCode":"MEX","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Edmonton","countryCode":"CAN","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Chihuahua","countryCode":"MEX","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Boise","countryCode":"USA","offset":"(UTC-06:00)","offsetPrefix":"-"},{"name":"America/Tijuana","countryCode":"MEX","offset":"(UTC-07:00)","offsetPrefix":"-"},{"name":"America/Hermosillo","countryCode":"MEX","offset":"(UTC-07:00)","offsetPrefix":"-"},{"name":"America/Whitehorse","countryCode":"CAN","offset":"(UTC-07:00)","offsetPrefix":"-"},{"name":"America/Vancouver","countryCode":"CAN","offset":"(UTC-07:00)","offsetPrefix":"-"},{"name":"America/Phoenix","countryCode":"USA","offset":"(UTC-07:00)","offsetPrefix":"-"},{"name":"America/Dawson","countryCode":"CAN","offset":"(UTC-07:00)","offsetPrefix":"-"},{"name":"America/Creston","countryCode":"CAN","offset":"(UTC-07:00)","offsetPrefix":"-"},{"name":"America/Dawson_Creek","countryCode":"CAN","offset":"(UTC-07:00)","offsetPrefix":"-"},{"name":"America/Los_Angeles","countryCode":"USA","offset":"(UTC-07:00)","offsetPrefix":"-"},{"name":"America/Fort_Nelson","countryCode":"CAN","offset":"(UTC-07:00)","offsetPrefix":"-"},{"name":"America/Nome","countryCode":"USA","offset":"(UTC-08:00)","offsetPrefix":"-"},{"name":"America/Sitka","countryCode":"USA","offset":"(UTC-08:00)","offsetPrefix":"-"},{"name":"America/Yakutat","countryCode":"USA","offset":"(UTC-08:00)","offsetPrefix":"-"},{"name":"America/Metlakatla","countryCode":"USA","offset":"(UTC-08:00)","offsetPrefix":"-"},{"name":"Pacific/Pitcairn","countryCode":"PCN","offset":"(UTC-08:00)","offsetPrefix":"-"},{"name":"America/Juneau","countryCode":"USA","offset":"(UTC-08:00)","offsetPrefix":"-"},{"name":"America/Anchorage","countryCode":"USA","offset":"(UTC-08:00)","offsetPrefix":"-"},{"name":"America/Adak","countryCode":"USA","offset":"(UTC-09:00)","offsetPrefix":"-"},{"name":"Pacific/Gambier","countryCode":"PYF","offset":"(UTC-09:00)","offsetPrefix":"-"},{"name":"Pacific/Marquesas","countryCode":"PYF","offset":"(UTC-09:30)","offsetPrefix":"-"},{"name":"Pacific/Rarotonga","countryCode":"COK","offset":"(UTC-10:00)","offsetPrefix":"-"},{"name":"Pacific/Honolulu","countryCode":"USA","offset":"(UTC-10:00)","offsetPrefix":"-"},{"name":"Pacific/Tahiti","countryCode":"PYF","offset":"(UTC-10:00)","offsetPrefix":"-"},{"name":"Pacific/Midway","countryCode":"UMI","offset":"(UTC-11:00)","offsetPrefix":"-"},{"name":"Pacific/Niue","countryCode":"NIU","offset":"(UTC-11:00)","offsetPrefix":"-"}
+  ]
+}