feat(sizes): changed the idea about different sizes

Author: iliyaZelenko

gh-pages-src/package.json

@@ -9,6 +9,7 @@
     "build-with-deploy": "yarn build && yarn deploy"
   },
   "dependencies": {
+    "bootstrap": "^4.3.1",
     "vue-analytics": "^5.16.4",
     "vuetify": "2.0.0-alpha.9"
   },

gh-pages-src/pages/dev/Example6.vue

@@ -25,7 +25,6 @@
         >
       </v-flex>
       <v-flex xs6>
-        {{ selected }}
         <!--
         <cool-select
           v-model="selected"
@@ -41,7 +40,7 @@
           v-model="selected"
           :items="items"
           placeholder="lg"
-          size-lg
+          size="lg"
         />
 
         <br>
@@ -54,11 +53,13 @@
 
         <br>
 
+        <!-- TODO вместо size-* использовать size="size-name" -->
+
         <cool-select
           v-model="selected"
           :items="items"
           placeholder="sm"
-          size-sm
+          size="sm"
         />
       </v-flex>
     </v-layout>
@@ -67,6 +68,7 @@
 
 <script>
 import { CoolSelect } from '../../main'
+import 'bootstrap/dist/css/bootstrap.min.css'
 
 const initSeconds = 5
 

gh-pages-src/yarn.lock

@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@mdi/font/-/font-3.5.95.tgz#422d1982566b4a0577b457cd0acc2168ee8343c3"
   integrity sha512-WHSJ0TJ70qkn+EPsW9w22pQU+kjEnRZlfN4N7xsFFmKa6VhpdQcwTWqj9PDH3oq6Be2p0IW/VDURJvPWDnBAUw==
 
+bootstrap@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.3.1.tgz#280ca8f610504d99d7b6b4bfc4b68cec601704ac"
+  integrity sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==
+
 vue-analytics@^5.16.4:
   version "5.16.4"
   resolved "https://registry.yarnpkg.com/vue-analytics/-/vue-analytics-5.16.4.tgz#7f9e197cbc64afac96884a05214b17efaf8e9d09"

src/component.vue

@@ -4,8 +4,8 @@
     :tabindex="disableSearch ? 0 : -1"
     :class="{
       'IZ-select': true,
-      'IZ-select--sm': sizeSm,
-      'IZ-select--lg': sizeLg
+      'IZ-select--sm': size === SIZES.SMALL,
+      'IZ-select--lg': size === SIZES.LARGE
     }"
     @keydown.up="onSelectByArrow"
     @keydown.down="onSelectByArrow"
@@ -167,6 +167,7 @@ import { isObject, getOffsetSum } from './helpers'
 import eventsListeners from './eventsListeners'
 import props from './props'
 import computed from './computed'
+import { SIZES } from '~/constants'
 
 export default {
   name: 'VueSelect',
@@ -178,6 +179,7 @@ export default {
   props,
   data () {
     return {
+      SIZES,
       wishShowMenu: false,
       arrowsIndex: null,
       focused: false,
@@ -252,13 +254,6 @@ export default {
         this.setInputFocused()
       }
 
-      // scroll to component input el
-      // this.$refs['IZ-select__input'].scrollIntoView({
-      //   behavior: 'smooth',
-      //   // to top or bottom border
-      //   block: this.isMobile ? 'start' : 'end'
-      // })
-
       if (window.scrollTo && this.allowMobileScroll && this.isMobile) {
         const { top } = getOffsetSum(this.$refs['IZ-select__input'])
 

src/computed.js

@@ -29,10 +29,10 @@ export default {
     if (this.loading) {
       styles['background-image'] = `url(${this.loadingIndicator})`
     }
-    if (this.inputElCustomAttributes) {
+    if (this.inputElCustomAttributes && this.inputElCustomAttributes.style) {
       styles = {
         ...styles,
-        ...this.inputElCustomAttributes
+        ...this.inputElCustomAttributes.style
       }
     }
 

src/constants.js

@@ -0,0 +1,5 @@
+export const SIZES = {
+  DEFAULT: 'default',
+  SMALL: 'sm',
+  LARGE: 'lg'
+}

src/props.js

@@ -1,3 +1,5 @@
+import { SIZES } from './constants'
+
 export default {
   value: {
     type: [Array, Object, String, Number, Boolean], // TODO set to null (any type) after issue fix
@@ -142,14 +144,9 @@ export default {
     default: false,
     note: 'does the component have a successful state. If true, then apply green colors.'
   },
-  sizeSm: {
-    type: Boolean,
-    default: false,
-    note: 'sets a small size'
-  },
-  sizeLg: {
-    type: Boolean,
-    default: false,
-    note: 'sets a large size'
+  size: {
+    type: String,
+    default: SIZES.DEFAULT,
+    note: 'sets size'
   }
 }