@afeefa/vue-app 0.0.168 → 0.0.169
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -1 +1 @@
|
|
|
1
|
-
0.0.
|
|
1
|
+
0.0.169
|
package/package.json
CHANGED
|
@@ -10,18 +10,25 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
<script>
|
|
13
|
-
import { Component, Vue } from '@a-vue'
|
|
13
|
+
import { Component, Vue, Watch } from '@a-vue'
|
|
14
14
|
|
|
15
15
|
@Component({
|
|
16
|
-
props: ['validator', {dense: true, outlined: true}]
|
|
16
|
+
props: ['validator', {dense: true, outlined: true, focus: false}]
|
|
17
17
|
})
|
|
18
18
|
export default class ATextArea extends Vue {
|
|
19
19
|
mounted () {
|
|
20
|
+
this.setFocus()
|
|
21
|
+
|
|
20
22
|
if (this.validator) {
|
|
21
23
|
this.$refs.input.validate(true)
|
|
22
24
|
}
|
|
23
25
|
}
|
|
24
26
|
|
|
27
|
+
@Watch('focus')
|
|
28
|
+
focusChanged () {
|
|
29
|
+
this.setFocus()
|
|
30
|
+
}
|
|
31
|
+
|
|
25
32
|
get validationRules () {
|
|
26
33
|
const label = this.$attrs.label
|
|
27
34
|
return (this.validator && this.validator.getRules(label)) || []
|
|
@@ -33,6 +40,17 @@ export default class ATextArea extends Vue {
|
|
|
33
40
|
}
|
|
34
41
|
return this.validator.getParam('max') || false
|
|
35
42
|
}
|
|
43
|
+
|
|
44
|
+
setFocus (force = false) {
|
|
45
|
+
const focus = this.focus || force // set focus if this.focus or else if forced from outside
|
|
46
|
+
if (focus) {
|
|
47
|
+
// if run in a v-dialog, the dialog background would
|
|
48
|
+
// steal the focus without requestAnimationFrame
|
|
49
|
+
requestAnimationFrame(() => {
|
|
50
|
+
this.$el.querySelector('textarea').focus()
|
|
51
|
+
})
|
|
52
|
+
}
|
|
53
|
+
}
|
|
36
54
|
}
|
|
37
55
|
</script>
|
|
38
56
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div class="header">
|
|
4
4
|
<v-avatar
|
|
5
5
|
v-if="_icon"
|
|
6
|
-
color="#
|
|
6
|
+
color="#F4F4F4"
|
|
7
7
|
size="2.5rem"
|
|
8
8
|
>
|
|
9
9
|
<v-icon
|
|
@@ -14,14 +14,19 @@
|
|
|
14
14
|
</v-icon>
|
|
15
15
|
</v-avatar>
|
|
16
16
|
|
|
17
|
-
<
|
|
17
|
+
<div
|
|
18
|
+
v-else
|
|
19
|
+
class="iconPlaceholder"
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
<label class="label">{{ label }}</label>
|
|
18
23
|
|
|
19
24
|
<div class="pl-2">
|
|
20
25
|
<slot name="actionButton" />
|
|
21
26
|
</div>
|
|
22
27
|
</div>
|
|
23
28
|
|
|
24
|
-
<div
|
|
29
|
+
<div class="content">
|
|
25
30
|
<a-row
|
|
26
31
|
vertical
|
|
27
32
|
gap="6"
|
|
@@ -57,32 +62,34 @@ export default class DetailProperty extends Vue {
|
|
|
57
62
|
<style lang="scss" scoped>
|
|
58
63
|
.detailProperty {
|
|
59
64
|
width: 100%;
|
|
65
|
+
|
|
60
66
|
.header {
|
|
61
67
|
display: flex;
|
|
62
68
|
flex-wrap: nowrap;
|
|
63
69
|
align-items: center;
|
|
64
70
|
height: 40px;
|
|
71
|
+
margin-bottom: .5rem;
|
|
65
72
|
|
|
66
73
|
.v-avatar {
|
|
67
74
|
flex: 0 0 40px;
|
|
68
75
|
margin-right: 15px;
|
|
69
76
|
}
|
|
70
77
|
|
|
78
|
+
.iconPlaceholder {
|
|
79
|
+
width: 55px;
|
|
80
|
+
}
|
|
81
|
+
|
|
71
82
|
.label {
|
|
72
83
|
display: block;
|
|
73
84
|
text-transform: uppercase;
|
|
74
|
-
letter-spacing:
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
padding-left: 0;
|
|
78
|
-
}
|
|
85
|
+
letter-spacing: 3px;
|
|
86
|
+
border-bottom: 5px solid #CCCCCC;
|
|
87
|
+
color: #666666;
|
|
79
88
|
}
|
|
80
89
|
}
|
|
90
|
+
|
|
81
91
|
.content {
|
|
82
92
|
padding-left: 55px;
|
|
83
|
-
&--withIcon {
|
|
84
|
-
padding-left: 55px;
|
|
85
|
-
}
|
|
86
93
|
}
|
|
87
94
|
}
|
|
88
95
|
</style>
|