Merge pull request lusaxweb#274 from kaungmyatlwin/input_size

Add vsSize prop for <vs-input> component
Tofandel · Oct 2, 2018 · 4b5a8cb · 4b5a8cb
2 parents f8b639a + 723df62
commit 4b5a8cb
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git a/docs/components/input.md b/docs/components/input.md
@@ -40,6 +40,11 @@ API:
    parameters: primary,success,danger,warning,dark,RGB,HEX
    description: Input and text color.
    default: primary
+ - name: vs-size
+   type: String
+   parameters: small,normal,large
+   description: Size of input.
+   default: normal
  - name: type
    type: String
    parameters: email, number, url, password, custom

diff --git a/src/components/vsInput/main.styl b/src/components/vsInput/main.styl
@@ -30,13 +30,27 @@
       box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.150);
       transition: all .3s ease
       width: 100%
+      &-small
+        padding: 0.2rem
+        + .vs-placeholder-label-small
+          padding: 0rem 0.4rem
+      &-normal
+        padding: 0.4rem
+      &-large
+        padding: 0.8rem
+        + .vs-placeholder-label-large
+          padding: 0.6rem
       &:focus
         box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.150);
       &:focus,&.hasValue
         + .vs-placeholder-label
           transform: translate(-3px,-90%) !important
           font-size: .7rem
           padding-left: .5rem !important
+        + .vs-placeholder-label-small
+          transform: translate(-3px,-120%) !important
+          font-size: .7rem
+          padding-left: .5rem !important
       &:focus
         + .input-span-placeholder
           transform: translate(5px)
@@ -66,6 +80,10 @@
       cursor text
       user-select none
       top: 2px
+      &-small
+        padding: 0.2rem
+      &-large
+        padding: 0.6rem
     .icon-inputx
       position absolute
       left 5px;
@@ -77,7 +95,11 @@
       cursor default
       user-select none
       top: 8px
-
+      &-small
+        top: 4px
+        font-size: 1rem
+      &-large
+        top: 14px
       &.icon-after
         left auto
         right 5px;

diff --git a/src/components/vsInput/vsInput.vue b/src/components/vsInput/vsInput.vue
@@ -19,11 +19,11 @@
       <input
         ref="vsinput"
         :style="style"
-        :class="{
+        :class="[`vs-inputx-${vsSize}`,{
           'hasValue':value != '',
           'hasIcon':vsIcon,
           'icon-after-input':vsIconAfter
-        }"
+        }]"
         :placeholder="null"
         :value="value"
         v-bind="$attrs"
@@ -35,9 +35,12 @@
           v-if="isValue&&(vsLabelPlaceholder||$attrs.placeholder)"
           ref="spanplaceholder"
           :style="styleLabel"
-          :class="{
-            'vs-placeholder-label':vsLabelPlaceholder,
-          }"
+          :class="[
+          vsLabelPlaceholder&&(`vs-placeholder-label-${vsSize}`),
+          `input-span-placeholder-${vsSize}`,
+          {
+            'vs-placeholder-label': vsLabelPlaceholder,
+          }]"
           class="input-span-placeholder"
           @click="focusInput">
           {{ $attrs.placeholder || vsLabelPlaceholder }}
@@ -46,7 +49,7 @@
 
       <i
         v-if="vsIcon"
-        :class="[vsIconPack,vsIcon,{
+        :class="[vsIconPack,vsIcon, `icon-inputx-${vsSize}`, {
           'icon-after':vsIconAfter,
         }]"
         translate="no"
@@ -175,6 +178,10 @@ export default {
       default: null,
       type:String
     },
+    vsSize:{
+      default:'normal',
+      type:String
+    }
   },
   data:()=>({
     isFocus:false