feat(component): different sizes

lg, sm BREAKING CHANGE: the sizes are adjusted to fit the bootstrap styles perfectly, maybe they changed a little
iliyaZelenko · Apr 6, 2019 · 1e498e5 · 1e498e5
1 parent 1aeb01d
commit 1e498e5
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -40,17 +40,18 @@
 
 ## Features
 
-- 2 themes: Bootstrap 4, Material Design
+- 2 themes: Bootstrap 4 (equal styles), Material Design
 - autocomplete (you can use custom search)
-- control through arrows
-- slots (13)
-- events (7)
-- props (24)
+- keyboard controls (not only through the arrows)
+- slots (13) allow content to be changed anywhere
+- events (7) will let you know about everything
+- props (24) allow you to customize a component in a variety of ways
 - loading indicator (helpful for REST requests)
-- validation
+- validation, state of error and success
 - support on mobile devices
 - disabled and readonly
-- the ability to set the size of the field and other styles
+- smile and large sizes (as in bootstrap)
+- ability to set styles for a component
 - TypeScript support
 
 Write your suggestions, glad to add.

diff --git a/gh-pages-src/App.vue b/gh-pages-src/App.vue
@@ -5,6 +5,13 @@
       rel="stylesheet"
     >
 
+    <!--
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    >
+    -->
+
     <div id="app">
       <v-app>
         <!--

diff --git a/gh-pages-src/pages/dev/Example6.vue b/gh-pages-src/pages/dev/Example6.vue
@@ -1,22 +1,66 @@
 <template>
   <div class="demo-page-wrap">
-    <div>
-      <cool-select
-        v-model="selected"
-        :items="items"
-        :style="{
-          height: '50px'
-        }"
-        placeholder="Select name"
-      />
-
-      <cool-select
-        v-model="selected"
-        :items="items"
-        placeholder="Select name"
-        disable-search
-      />
-    </div>
+    <v-layout>
+      <v-flex xs6>
+        <input
+          class="form-control form-control-lg"
+          type="text"
+          placeholder=".form-control-lg"
+        >
+
+        <br>
+
+        <input
+          class="form-control"
+          type="text"
+          placeholder="Default input"
+        >
+
+        <br>
+
+        <input
+          class="form-control form-control-sm"
+          type="text"
+          placeholder=".form-control-sm"
+        >
+      </v-flex>
+      <v-flex xs6>
+        <!--
+        <cool-select
+          v-model="selected"
+          :items="items"
+          :style="{
+            height: '50px'
+          }"
+          placeholder="Select name"
+        />
+        -->
+
+        <cool-select
+          v-model="selected"
+          :items="items"
+          placeholder="lg"
+          size-lg
+        />
+
+        <br>
+
+        <cool-select
+          v-model="selected"
+          :items="items"
+          placeholder="md"
+        />
+
+        <br>
+
+        <cool-select
+          v-model="selected"
+          :items="items"
+          placeholder="sm"
+          size-sm
+        />
+      </v-flex>
+    </v-layout>
   </div>
 </template>
 

diff --git a/src/component.vue b/src/component.vue
@@ -1,9 +1,12 @@
 <template>
-  <!---->
   <div
     ref="IZ-select"
     :tabindex="disableSearch ? 0 : -1"
-    class="IZ-select"
+    :class="{
+      'IZ-select': true,
+      'IZ-select--sm': sizeSm,
+      'IZ-select--lg': sizeLg
+    }"
     @keydown.up="onSelectByArrow"
     @keydown.down="onSelectByArrow"
     @keydown.enter="onEnter"

diff --git a/src/props.js b/src/props.js
@@ -145,5 +145,15 @@ export default {
     type: Boolean,
     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'
   }
 }
diff --git a/src/styles/themes/bootstrap.styl b/src/styles/themes/bootstrap.styl
@@ -2,10 +2,40 @@
 
 inputRadius = .25rem
 menuRadius = inputRadius
+inputPaddingLeft = .75rem
 
 .IZ-select
   outline: none
 
+  .IZ-select__input
+    font-weight: 400
+    font-size: 1rem
+    line-height: 1.5
+
+    input
+      height: calc(1.5em + .75rem)
+      padding: .375rem inputPaddingLeft
+
+  &--sm
+    .IZ-select__input
+      border-radius: .2rem
+
+      input
+        height: calc(1.5em + .5rem)
+        padding: .25rem .5rem
+        font-size: .875rem
+        line-height: 1.5
+
+  &--lg
+    .IZ-select__input
+      border-radius: .3rem
+
+      input
+        height: calc(1.5em + 1rem)
+        padding: .5rem 1rem
+        font-size: 1.25rem
+        line-height: 1.5
+
 //.IZ-select *
 //  font-size: 16px
 //  font-weight: 400
@@ -18,10 +48,7 @@ menuRadius = inputRadius
   -webkit-box-flex: 1
   flex: 1 1 auto
   flex-wrap: wrap
-
   width: 100%
-  font-size: 1rem
-  line-height: 1.5
   color: #495057
   background-color: #fff
   background-clip: padding-box
@@ -35,7 +62,7 @@ menuRadius = inputRadius
     //border-bottom-right-radius: 0
 
   &.IZ-select__input--selection-slot
-    padding-left: .75rem
+    padding-left: inputPaddingLeft
 
     input
       padding-left: 10px
@@ -80,9 +107,7 @@ menuRadius = inputRadius
     background-position: right 10px center
     background-repeat: no-repeat
     color: #495057 !important
-
     background-color: transparent
-    padding: .375rem .75rem // поменять и в другом месте .75rem (сделать поиск)
     border-style: none
     pointer-events: auto
     flex: 1 1

diff --git a/src/styles/themes/material-design.styl b/src/styles/themes/material-design.styl
@@ -2,10 +2,34 @@
 
 inputRadius = 2px
 menuRadius = inputRadius
+inputPaddingLeft = 15px
 
 .IZ-select
   outline: none
 
+  .IZ-select__input
+    font-weight: 400
+    font-size: 1rem
+    line-height: 1.5
+
+    input
+      height: calc(2.3em + .75rem)
+      padding: 12px inputPaddingLeft
+
+  &--sm
+    .IZ-select__input input
+      height: calc(2.3em + .5rem)
+      padding: .25rem .8rem
+      font-size: .875rem
+      line-height: 1.5
+
+  &--lg
+    .IZ-select__input input
+      height: calc(2.3em + 1rem)
+      padding: .5rem 1rem
+      font-size: 1.25rem
+      line-height: 1.5
+
 .IZ-select *
   font-size: 16px
   font-weight: 400
@@ -19,12 +43,7 @@ menuRadius = inputRadius
   -webkit-box-flex: 1
   flex: 1 1 auto
   flex-wrap: wrap
-
-  //padding: 12px 20px
   width: 100%
-  //padding: 0 12px
-  font-size: 1rem
-  line-height: 1.5
   color: #495057
   background-color: #fff
   background-clip: padding-box
@@ -51,7 +70,7 @@ menuRadius = inputRadius
     border-bottom-right-radius: 0
 
   &.IZ-select__input--selection-slot
-    padding-left: 20px
+    padding-left: inputPaddingLeft
 
     input
       padding-left: 10px
@@ -88,7 +107,6 @@ menuRadius = inputRadius
     color: #495057 !important
 
     background-color: transparent
-    padding: 12px 20px // поменять и в другом месте 20px (сделать поиск)
     border-style: none
     pointer-events: auto
     flex: 1 1
@@ -113,7 +131,6 @@ menuRadius = inputRadius
   transform-origin: left top 0 // на всякий случай
   background-color: #fff
   border: 1px solid #ced4da
-  // не забудь поменять для &.IZ-select__menu--disable-search (ниже) стили рамки
   border-radius: menuRadius
   border-top-left-radius: 0
   border-top-right-radius: 0
@@ -133,7 +150,7 @@ menuRadius = inputRadius
 
 .IZ-select__item
   cursor: pointer
-  padding: 18px 20px
+  padding: 18px inputPaddingLeft
   transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1)
 
   &:hover