Skip to content

Commit c5ac39f

Browse files
rtibblesrtibbles
authored
Merge pull request #1942 from christianmemije/textboxes
k-textbox
2 parents 938945f + fb5832f commit c5ac39f

File tree

21 files changed

+404
-415
lines changed

21 files changed

+404
-415
lines changed

‎kolibri/core/assets/src/core-app/apiSpec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import coreBase from '../views/core-base';
3434
import coreModal from '../views/core-modal';
3535
import sideNav from '../views/side-nav';
3636
import kButton from '../views/k-button';
37-
import textbox from '../views/textbox';
37+
import kTextbox from '../views/k-textbox';
3838
import dropdownMenu from '../views/dropdown-menu';
3939
import kNavbar from '../views/k-navbar';
4040
import kNavbarButton from '../views/k-navbar/button';
@@ -92,7 +92,7 @@ export default {
9292
coreModal,
9393
sideNav,
9494
kButton,
95-
textbox,
95+
kTextbox,
9696
dropdownMenu,
9797
kNavbar,
9898
kNavbarButton,

‎kolibri/core/assets/src/views/k-textbox/index.vue‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<template>
2+
3+
<ui-textbox
4+
ref="textbox"
5+
v-model="currentText"
6+
:label="label"
7+
:disabled="disabled"
8+
:required="required"
9+
:invalid="invalid"
10+
:error="invalidText"
11+
:autofocus="autofocus"
12+
:maxlength="maxlength"
13+
:autocomplete="autocomplete"
14+
:type="type"
15+
:enforceMaxlength="true"
16+
:floatingLabel="true"
17+
@input="updateText"
18+
@keydown="emitKeydown"
19+
@focus="$emit('focus')"
20+
@blur="$emit('blur')"
21+
/>
22+
23+
</template>
24+
25+
26+
<script>
27+
28+
import uiTextbox from 'keen-ui/src/UiTextbox';
29+
30+
/**
31+
* Handles user input.
32+
*/
33+
export default {
34+
name: 'k-textbox',
35+
components: { uiTextbox },
36+
props: {
37+
/**
38+
* v-model
39+
*/
40+
value: {
41+
type: [String, Number],
42+
},
43+
/**
44+
* Label
45+
*/
46+
label: {
47+
type: String,
48+
required: true,
49+
},
50+
/**
51+
* Whether or not disabled
52+
*/
53+
disabled: {
54+
type: Boolean,
55+
default: false,
56+
},
57+
/**
58+
* Whether or not required
59+
*/
60+
required: {
61+
type: Boolean,
62+
default: false,
63+
},
64+
/**
65+
* Whether or not input is invalid
66+
*/
67+
invalid: {
68+
type: Boolean,
69+
default: false,
70+
},
71+
/**
72+
* Text displayed if input is invalid
73+
*/
74+
invalidText: {
75+
type: String,
76+
required: false,
77+
},
78+
/**
79+
* Whether or not to autofocus
80+
*/
81+
autofocus: {
82+
type: Boolean,
83+
default: false,
84+
},
85+
/**
86+
* Max allowed length of input
87+
*/
88+
maxlength: {
89+
type: Number,
90+
required: false,
91+
},
92+
/**
93+
* HTML5 autocomplete attribute (off, on, name, username, current-password, etc.)
94+
*/
95+
autocomplete: {
96+
type: String,
97+
required: false,
98+
},
99+
/**
100+
* HTML5 type of input (text, password, number, etc.)
101+
*/
102+
type: {
103+
type: String,
104+
default: 'text',
105+
},
106+
},
107+
data() {
108+
return { currentText: this.value };
109+
},
110+
watch: {
111+
value(val) {
112+
this.currentText = val;
113+
},
114+
},
115+
methods: {
116+
updateText() {
117+
// v-model is just a :value + @input
118+
/**
119+
* Emits input event with new value
120+
*/
121+
this.$emit('input', this.currentText);
122+
},
123+
reset() {
124+
this.$refs.textbox.reset();
125+
},
126+
emitKeydown(e) {
127+
/**
128+
* Emits keydown event with event
129+
*/
130+
this.$emit('keydown', e);
131+
},
132+
},
133+
};
134+
135+
</script>
136+
137+
138+
<style lang="stylus"></style>

‎kolibri/core/assets/src/views/textbox/index.vue‎

Lines changed: 0 additions & 87 deletions
This file was deleted.

‎kolibri/plugins/coach/assets/src/views/create-exam-page/index.vue‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,21 @@
44
<h1>{{ $tr('createNewExam', { channelName: currentChannel.name }) }}</h1>
55
<div class="pure-g">
66
<div :class="windowSize.breakpoint > 3 ? 'pure-u-1-2' : 'pure-u-1-1'">
7-
<textbox
7+
<k-textbox
88
:label="$tr('title')"
9-
:ariaLabel="$tr('title')"
10-
:placeholder="$tr('enterTitle')"
119
:autofocus="true"
1210
:invalid="titleInvalid"
13-
:error="titleInvalidMsg"
11+
:invalidText="titleInvalidMsg"
1412
v-model.trim="inputTitle"
1513
@blur="validateTitle = true"
1614
@input="validateTitle = true"
1715
/>
1816
</div>
1917
<div :class="windowSize.breakpoint > 3 ? 'pure-u-1-2' : 'pure-u-1-1'">
20-
<textbox
18+
<k-textbox
2119
:label="$tr('numQuestions')"
22-
:ariaLabel="$tr('numQuestions')"
23-
:placeholder="$tr('enterNum')"
2420
:invalid="numQuestionsInvalid"
25-
:error="numQuestionsInvalidMsg"
21+
:invalidText="numQuestionsInvalidMsg"
2622
type="number"
2723
v-model.trim.number="inputNumQuestions"
2824
@blur="validateNumQuestMax = true"
@@ -32,9 +28,7 @@
3228
</div>
3329

3430
<h2>{{ $tr('chooseExercises') }}</h2>
35-
<!--<textbox-->
36-
<!--:ariaLabel="$tr('searchContent')"-->
37-
<!--:placeholder="$tr('searchContent')"-->
31+
<!--<k-textbox-->
3832
<!--v-model.trim="searchInput"-->
3933
<!--/>-->
4034
<!--<div v-if="searchInput">-->
@@ -138,7 +132,7 @@
138132
import uiProgressLinear from 'keen-ui/src/UiProgressLinear';
139133
import kButton from 'kolibri.coreVue.components.kButton';
140134
import kCheckbox from 'kolibri.coreVue.components.kCheckbox';
141-
import textbox from 'kolibri.coreVue.components.textbox';
135+
import kTextbox from 'kolibri.coreVue.components.kTextbox';
142136
import topicRow from './topic-row';
143137
import exerciseRow from './exercise-row';
144138
import previewNewExamModal from './preview-new-exam-modal';
@@ -150,9 +144,7 @@
150144
chooseExercises: 'Select exercises to pull questions from',
151145
selectAll: 'Select all',
152146
title: 'Exam title',
153-
enterTitle: 'Enter a title',
154147
numQuestions: 'Number of questions',
155-
enterNum: 'Enter a number',
156148
examRequiresTitle: 'The exam requires a title',
157149
numQuestionsBetween: 'The exam requires a number of questions between 1 and 50',
158150
numQuestionsExceed:
@@ -188,7 +180,7 @@
188180
uiSnackbarContainer,
189181
uiProgressLinear,
190182
kButton,
191-
textbox,
183+
kTextbox,
192184
topicRow,
193185
exerciseRow,
194186
previewNewExamModal,

‎kolibri/plugins/coach/assets/src/views/exams-page/rename-exam-modal.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
22

33
<core-modal :title="$tr('renameExam')" @cancel="close">
44
<form @submit.prevent="callRenameExam">
5-
<core-textbox
5+
<k-textbox
66
:label="$tr('examName')"
7-
:aria-label="$tr('examName')"
87
:autofocus="true"
98
:required="true"
109
:invalid="duplicateTitle"
11-
:error="$tr('duplicateTitle')"
10+
:invalidText="$tr('duplicateTitle')"
1211
v-model.trim="newExamTitle"/>
1312
<div class="footer">
1413
<k-button :text="$tr('cancel')" :raised="false" type="button" @click="close"/>
@@ -25,7 +24,7 @@
2524
import * as examActions from '../../state/actions/exam';
2625
import coreModal from 'kolibri.coreVue.components.coreModal';
2726
import kButton from 'kolibri.coreVue.components.kButton';
28-
import coreTextbox from 'kolibri.coreVue.components.textbox';
27+
import kTextbox from 'kolibri.coreVue.components.kTextbox';
2928
export default {
3029
name: 'renameExamModal',
3130
$trs: {
@@ -38,7 +37,7 @@
3837
components: {
3938
coreModal,
4039
kButton,
41-
coreTextbox,
40+
kTextbox,
4241
},
4342
props: {
4443
examId: {

‎kolibri/plugins/coach/assets/src/views/groups-page/create-group-modal.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,12 @@
44
@cancel="close">
55
<div>
66
<form @submit.prevent="callCreateGroup">
7-
<textbox type="text"
7+
<k-textbox type="text"
88
:label="$tr('learnerGroupName')"
9-
:aria-label="$tr('learnerGroupName')"
109
:autofocus="true"
1110
:required="true"
1211
:invalid="duplicateName"
13-
:error="$tr('duplicateName')"
12+
:invalidText="$tr('duplicateName')"
1413
v-model.trim="groupNameInput" />
1514
<k-button :text="$tr('cancel')"
1615
@click="close"
@@ -30,7 +29,7 @@
3029
3130
import * as groupActions from '../../state/actions/group';
3231
import coreModal from 'kolibri.coreVue.components.coreModal';
33-
import textbox from 'kolibri.coreVue.components.textbox';
32+
import kTextbox from 'kolibri.coreVue.components.kTextbox';
3433
import kButton from 'kolibri.coreVue.components.kButton';
3534
export default {
3635
name: 'createGroupModal',
@@ -49,7 +48,7 @@
4948
},
5049
components: {
5150
coreModal,
52-
textbox,
51+
kTextbox,
5352
kButton,
5453
},
5554
props: {

‎kolibri/plugins/coach/assets/src/views/groups-page/delete-group-modal.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
2020
import * as groupActions from '../../state/actions/group';
2121
import coreModal from 'kolibri.coreVue.components.coreModal';
22-
import textbox from 'kolibri.coreVue.components.textbox';
22+
import kTextbox from 'kolibri.coreVue.components.kTextbox';
2323
import kButton from 'kolibri.coreVue.components.kButton';
2424
export default {
2525
name: 'deleteGroupModal',
@@ -33,7 +33,7 @@
3333
},
3434
components: {
3535
coreModal,
36-
textbox,
36+
kTextbox,
3737
kButton,
3838
},
3939
props: {

0 commit comments

Comments
 (0)