Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
1 result
Blame Permalink
FormPersonalInfo.vue 3.63 KiB
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 






<template>
  <div class="q-pa-md">
    <p>Fill in your personal details, you will be able to review them in your personal dashboard before publishing</p>
    <div class="row">
      <div class="col-12 col-md">
        <q-form
          class="q-py-md col q-gutter-md"
          style="max-width: 80vw; width: 700px"
        >
          <div class="row q-pb-md q-gutter-sm">
            <div class="col-12 col-md-auto">
              <p class="text-caption">Salutation</p>
              <q-select
                v-model="salutation"
                :options="titles"
                outlined=""
                dense=""
                style="max-width: 200px;"
              />
            </div>
            <div class="col-12 col-md-auto">
              <p class="text-caption">Name (*)</p>
              <div class="row q-gutter-sm">
                <q-input
                  dense=""
                  outlined=""
                  type="text"
                  label="Name"
                />

              </div>
            </div>
            <div class="col-12 col-md-auto">
              <p class="text-caption">Surname (*)</p>
              <div class="row q-gutter-sm">

                <q-input
                  dense=""
                  outlined
                  type="text"
                  label="Surname"
                />
              </div>
            </div>

          </div>
          <div class="row  q-gutter-sm">
            <div class="col-12 col-md-auto">
              <p class="text-caption">Date of birth (*)</p>
              <q-input
                outlined=""
                dense=""
                v-model="date"
                mask="date"
                :rules="['date']"
                style="width: 200px"
              >
                <template v-slot:append>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                  >
                    <q-popup-proxy
                      ref="qDateProxy"
                      transition-show="scale"
                      transition-hide="scale"
                    >
                      <q-date
                        v-model="date"
                        @input="() => $refs.qDateProxy.hide()"
                      />
                    </q-popup-proxy>
                  </q-icon>
                </template>
              </q-input>
            </div>

            <div class="col-12 col-md">
              <p class="text-caption">Nationality (*)</p>
              <q-select
                dense=""
                outlined=""
                v-model="nationality"
                :options="countries"
                style="max-width: 200px;"
              />

            </div>
          </div>
          <div class="row q-pb-md q-gutter-sm">
            <div class="col-12 col-md-auto">
              <p class="text-caption">Profile picture</p>
              <q-uploader
                label="Upload a picture"
                multiple
                accept=".jpg, .png"
                style="max-width: 300px"
                auto-upload=""
                :filter="checkFileSize"
              />
              <div class="text-caption text-grey">Allowed file types: .jpg and .png<br>Max upload size 1Mb</div>
            </div>
          </div>
        </q-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // name: 'ComponentName',
  data () {
    return { salutation: "Mr.", nationality: "USA", countries: ['USA'], date: '2001/01/01', titles: ['Mr', 'Mrs', 'Ms'] };
  },
  methods: {
    checkFileSize (files) {
      return files.filter(file => file.size < 1024 * 1024)
    },
  }
};
</script>

<style>
</style>