all files / src/components/views/ Setting.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1×
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <div>
    <h1 class="text-center">Settings</h1>
    <section class="content">
      <div class="row">
        <div class="col-md-12">
          <div class="box box-info">
            <!-- Input Addons -->
            <div class="box-header with-border">
              <h3 class="box-title">Inputs</h3>
            </div>
 
            <div class="box-body">
              <!-- calendar group -->
              <div class="input-group">
                <span class="input-group-addon">
                  <i class="fa fa-fw fa-calendar"></i>
                </span>
                <datepicker :readonly="true" format="MMM/D/YYYY" id="dateInput" width="100%"></datepicker>
              </div>
              <br />
              <br />
 
              <!-- with characthers -->
              <div class="input-group">
                <span class="input-group-addon">
                  <i class="fa fa-fw fa-at" aria-hidden="true"></i>
                </span>
                <input class="form-control" placeholder="Username" type="text">
              </div>
              <br />
              <div class="input-group">
                <span class="input-group-addon">
                  <i class="fa fa-fw fa-usd" aria-hidden="true"></i>
                </span>
                <input class="form-control" type="text">
                <span class="input-group-addon">.00</span>
              </div>
              <br />
 
              <!-- with icons from font awesome -->
              <h4>With icons</h4>
              <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
                <input class="form-control" placeholder="Email" type="email">
              </div>
              <br />
              <div class="input-group">
                <input class="form-control" type="text">
                <span class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
              </div>
              <br>
 
              <!-- Success/Error heads up input -->
              <h4>With border indicator</h4>
              <div class="form-group has-success">
                <label class="control-label" for="inputSuccess"><i class="fa fa-fw fa-check"></i> Input with success</label>
                <input class="form-control" id="inputSuccess" placeholder="Enter ..." type="text">
                <span class="help-block">Help block with success</span>
              </div>
              <br />
              <div class="form-group has-error">
                <label class="control-label" for="inputError"><i class="fa fa-fw fa-times-circle-o"></i> Input with error</label>
                <input class="form-control" id="inputError" placeholder="Enter ..." type="text">
                <span class="help-block">Help block with error</span>
              </div>
 
              <!-- select examples -->
              <h4>Select Options</h4>
              <div class="form-group">
                <label>Select</label>
                <select class="form-control">
                  <option>option 1</option>
                  <option>option 2</option>
                  <option>option 3</option>
                  <option>option 4</option>
                  <option>option 5</option>
                </select>
              </div>
              <br />
              <div class="form-group">
                <label>Select Multiple</label>
                <select multiple="" class="form-control">
                  <option>option 1</option>
                  <option>option 2</option>
                  <option>option 3</option>
                  <option>option 4</option>
                  <option>option 5</option>
                </select>
              </div>
 
              <!-- /input-group -->
            </div>
            <!-- /.box-body -->
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
require('moment')
import datepicker from 'vue-date-picker'
 
export default {
  name: 'Settings',
  components: { datepicker },
  computed: {
    datetime () {
      return new Date()
    }
  },
  methods: {
    clearInput (vueModel) {
      vueModel = ''
    }
  }
}
</script>
 
<style>
.datetime-picker input {
  height: 4em !important;
}
</style>