Skip to content
This repository was archived by the owner on May 10, 2024. It is now read-only.

Commit 1289325

Browse files
blackandredblackandred
committed
https://github.com/vuejs/vue/issues/7058
1 parent e6775f1 commit 1289325

File tree

4 files changed

+147
-78
lines changed

4 files changed

+147
-78
lines changed

‎e2e/features/bootstrap/TechnicalContext.php

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,4 +101,37 @@ protected function findByCSS(string $selector, int $timeout = 10): NodeElement
101101
sleep(5);
102102
throw new ElementNotFoundException($this->getSession()->getDriver(), null, 'css', $selector);
103103
}
104+
105+
/**
106+
* Improved version of fillField() that supports buttons marked with "data-field" attribute
107+
*
108+
* @param string $field
109+
* @param string $value
110+
*
111+
* @throws ElementNotFoundException
112+
*/
113+
public function fillField($field, $value)
114+
{
115+
try {
116+
parent::fillField($field, $value);
117+
118+
} catch (ElementNotFoundException $exception) {
119+
$element = $this->findByCSS('input[data-field="' . $field . '"], input[placeholder="' . $field . '"]');
120+
121+
if ($element) {
122+
$element->setValue($value);
123+
return;
124+
}
125+
126+
throw $exception;
127+
}
128+
}
129+
130+
/**
131+
* @Then I debug
132+
*/
133+
public function iWaitForUserInput(): void
134+
{
135+
readline('Press [enter] to continue');
136+
}
104137
}

‎frontend/src/components/Inputs/BaseInput.vue

Lines changed: 85 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,117 @@
11
<template>
2-
<div class="form-group"
3-
:class="{
2+
<div class="form-group"
3+
:class="{
44
'input-group': hasIcon,
55
'input-group-focus': focused
66
}">
7-
<slot name="label">
8-
<label v-if="label" class="control-label">
9-
{{label}}
10-
</label>
11-
</slot>
12-
<slot name="addonLeft">
7+
<slot name="label">
8+
<label v-if="label" class="control-label">
9+
{{ label }}
10+
</label>
11+
</slot>
12+
<slot name="addonLeft">
1313
<span v-if="addonLeftIcon" class="input-group-prepend">
1414
<div class="input-group-text">
1515
<i :class="addonLeftIcon"></i>
1616
</div>
1717
</span>
18-
</slot>
19-
<slot>
20-
<input
21-
:value="value"
22-
v-bind="$attrs"
23-
v-on="listeners"
24-
class="form-control"
25-
aria-describedby="addon-right addon-left">
26-
</slot>
27-
<slot name="addonRight">
18+
</slot>
19+
<slot>
20+
<input
21+
:data-input-id="inputId"
22+
:value="value"
23+
v-bind="$attrs"
24+
v-on="listeners"
25+
class="form-control"
26+
@blur="verifyElementChangeValue"
27+
aria-describedby="addon-right addon-left">
28+
</slot>
29+
<slot name="addonRight">
2830
<span v-if="addonRightIcon" class="input-group-append">
2931
<div class="input-group-text">
3032
<i :class="addonRightIcon"></i>
3133
</div>
3234
</span>
33-
</slot>
34-
<slot name="helperText"></slot>
35-
</div>
35+
</slot>
36+
<slot name="helperText"></slot>
37+
</div>
3638
</template>
3739
<script>
38-
export default {
40+
export default {
3941
inheritAttrs: false,
4042
name: "base-input",
4143
props: {
42-
label: {
43-
type: String,
44-
description: "Input label"
45-
},
46-
value: {
47-
type: [String, Number],
48-
description: "Input value"
49-
},
50-
addonRightIcon: {
51-
type: String,
52-
description: "Input icon on the right"
53-
},
54-
addonLeftIcon: {
55-
type: String,
56-
description: "Input icon on the left"
57-
},
44+
label: {
45+
type: String,
46+
description: "Input label"
47+
},
48+
initialValue: {
49+
type: [String, Number],
50+
description: "Input value"
51+
},
52+
addonRightIcon: {
53+
type: String,
54+
description: "Input icon on the right"
55+
},
56+
addonLeftIcon: {
57+
type: String,
58+
description: "Input icon on the left"
59+
},
5860
},
5961
model: {
60-
prop: 'value',
61-
event: 'input'
62+
prop: 'initialValue',
63+
event: 'input'
6264
},
6365
data() {
64-
return {
65-
focused: false
66-
}
66+
return {
67+
focused: false,
68+
inputId: Math.random().toString(36).substring(7),
69+
value: ''
70+
}
6771
},
6872
computed: {
69-
hasIcon() {
70-
const { addonRight, addonLeft } = this.$slots;
71-
return addonRight !== undefined || addonLeft !== undefined || this.addonRightIcon !== undefined || this.addonLeftIcon !== undefined;
72-
},
73-
listeners() {
74-
return {
75-
...this.$listeners,
76-
input: this.onInput,
77-
blur: this.onBlur,
78-
focus: this.onFocus
73+
hasIcon() {
74+
const {addonRight, addonLeft} = this.$slots;
75+
return addonRight !== undefined || addonLeft !== undefined || this.addonRightIcon !== undefined || this.addonLeftIcon !== undefined;
76+
},
77+
listeners() {
78+
return {
79+
...this.$listeners,
80+
input: this.onInput,
81+
blur: this.onBlur,
82+
focus: this.onFocus
83+
}
7984
}
80-
}
8185
},
8286
methods: {
83-
onInput(evt) {
84-
this.$emit('input', evt.target.value)
85-
},
86-
onFocus() {
87-
this.focused = true;
88-
},
89-
onBlur() {
90-
this.focused = false;
91-
}
87+
onInput(evt) {
88+
this.$emit('input', evt.target.value)
89+
this.value = evt.target.value
90+
},
91+
onFocus() {
92+
this.focused = true;
93+
},
94+
onBlur() {
95+
this.focused = false;
96+
},
97+
// https://github.com/vuejs/vue/issues/7058
98+
verifyElementChangeValue() {
99+
let domElement = document.querySelectorAll('[data-input-id="' + this.inputId + '"]')
100+
101+
if (!domElement) {
102+
window.console.error('Cannot find input data-input-id=' + this.inputId)
103+
}
104+
105+
if (domElement[0].value !== this.password) {
106+
this.value = domElement[0].value
107+
this.$emit('input', this.value)
108+
}
109+
}
110+
},
111+
mounted() {
112+
this.value = this.initialValue
92113
}
93-
}
114+
}
94115
</script>
95116
<style>
96117

‎frontend/src/components/Security/Permissions.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
<div v-for="role in available.permissions" v-if="available" :style="isVisible ? '' : 'display: none;'">
2727
<input type="checkbox" class="border-input checkbox" :checked="isChecked(role.id)" @change="onCheckboxChange(role.id)" :disabled="isDisabled(role.id)">
28-
<label class="checkbox-label role-description" v-html="role.description && !showAdvanced ? role.description : role.id"></label>
28+
<label class="checkbox-label role-description clickable-label" v-html="role.description && !showAdvanced ? role.description : role.id" @click="onCheckboxChange(role.id)"></label>
2929
</div>
3030
</div>
3131
</template>

‎frontend/src/pages/UserProfile/EditProfileForm.vue

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,23 @@
1515
<div class="col-md-6">
1616
<base-input type="text"
1717
label="Organization"
18+
name="organization_name"
1819
placeholder="Mining Workers Cooperative"
19-
v-model="user.organization">
20-
</base-input>
20+
data-field="Organization"
21+
v-model="user.organization"
22+
@input="(value) => user.organization = value"
23+
/>
2124
</div>
2225
<div class="col-md-6">
23-
<base-input type="email"
26+
<base-input type="text"
2427
label="Email"
28+
name="email"
2529
placeholder="[email protected]"
2630
v-model="user.email"
27-
:readonly="!isAddingNew">
28-
</base-input>
31+
@input="(value) => user.email = value"
32+
data-field="Email"
33+
:readonly="!isAddingNew"
34+
/>
2935
</div>
3036
</div>
3137

@@ -89,8 +95,10 @@
8995
<label>About Me</label>
9096
<textarea rows="5" class="form-control border-input"
9197
placeholder="Describe user there"
92-
v-model="user.about">
93-
</textarea>
98+
v-model="user.about"
99+
data-field="About"
100+
name="about_user"
101+
/>
94102
</div>
95103
</div>
96104
</div>
@@ -100,24 +108,31 @@
100108
<base-input type="password"
101109
label="Current password"
102110
placeholder=""
111+
name="current_password"
112+
data-field="Current password"
103113
v-model="inputs.currentPassword"
104-
>
105-
</base-input>
114+
@input="(value) => user.currentPassword = value"
115+
/>
106116
</div>
107117
<div class="col-md-4">
108118
<base-input type="password"
109119
label="New password"
110120
placeholder=""
121+
name="new_password"
122+
data-field="New password"
111123
v-model="inputs.password"
112-
>
113-
</base-input>
124+
@input="(value) => user.password = value"
125+
/>
114126
</div>
115127
<div class="col-md-4">
116128
<base-input type="password"
117129
label="Repeat password"
118130
placeholder=""
119-
v-model="inputs.repeatPassword">
120-
</base-input>
131+
name="repeat_password"
132+
data-field="Repeat password"
133+
v-model="inputs.repeatPassword"
134+
@input="(value) => user.repeatPassword = value"
135+
/>
121136
</div>
122137
</div>
123138

0 commit comments

Comments
 (0)