#31: Add General Elements Box

devjin0617 · Apr 9, 2017 · f55dc59 · f55dc59
1 parent 10e5f69
commit f55dc59
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 1 deletion.
diff --git a/src/components/VASelect.vue b/src/components/VASelect.vue
@@ -0,0 +1,29 @@
+<template>
+  <select class="form-control" :disabled="isDisabled" :multiple="isMultiple">
+    <option v-for="item in list">
+      {{ item }}
+    </option>
+  </select>
+</template>
+<script>
+export default {
+  name: 'va-select',
+  props: {
+    list: {
+      type: Array,
+      default: []
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
+    },
+    isMultiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  created () {
+
+  }
+}
+</script>
diff --git a/src/pages/forms/GeneralElements.vue b/src/pages/forms/GeneralElements.vue
@@ -381,6 +381,38 @@
 
           </va-form-group>
 
+          <va-form-group>
+            <label>Select</label>
+            <va-select
+              :list="selectList"
+            ></va-select>
+          </va-form-group>
+
+          <va-form-group>
+            <label>Select Disabled</label>
+            <va-select
+              :list="selectList"
+              :isDisabled="true"
+            ></va-select>
+          </va-form-group>
+
+          <va-form-group>
+            <label>Select Multiple</label>
+            <va-select
+              :list="selectList"
+              :isMultiple="true"
+            ></va-select>
+          </va-form-group>
+
+          <va-form-group>
+            <label>Select Multiple Disabled</label>
+            <va-select
+              :list="selectList"
+              :isMultiple="true"
+              :isDisabled="true"
+            ></va-select>
+          </va-form-group>
+
         </div>
 
       </va-box>
@@ -398,9 +430,21 @@ import VAButton from '../../components/VAButton'
 import VATextareaGroup from '../../components/VATextareaGroup'
 import VAFormGroup from '../../components/VAFormGroup'
 import VARadio from '../../components/VARadio'
+import VASelect from '../../components/VASelect'
 
 export default {
   name: 'general-elements',
+  data () {
+    return {
+      selectList: [
+        'option1',
+        'option2',
+        'option3',
+        'option4',
+        'option5'
+      ]
+    }
+  },
   created () {
 
   },
@@ -412,7 +456,8 @@ export default {
     'va-button': VAButton,
     'va-textarea-group': VATextareaGroup,
     'va-form-group': VAFormGroup,
-    'va-radio': VARadio
+    'va-radio': VARadio,
+    'va-select': VASelect
   }
 }
 </script>