@westartcom/bread-quasar-fields 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fields/DateField.vue +1 -1
- package/fields/EmailField.vue +6 -2
- package/fields/NumberField.vue +14 -2
- package/fields/TelField.vue +85 -40
- package/fields/TextField.vue +12 -2
- package/fields/TextareaField.vue +21 -2
- package/package.json +9 -9
package/fields/DateField.vue
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
:minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
|
|
14
14
|
v-model="internalValue"
|
|
15
15
|
:disable="disable"
|
|
16
|
-
:
|
|
16
|
+
:error-message="''"
|
|
17
17
|
:hint="field.description"
|
|
18
18
|
outlined>
|
|
19
19
|
</q-input>
|
package/fields/EmailField.vue
CHANGED
|
@@ -13,9 +13,11 @@
|
|
|
13
13
|
:minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
|
|
14
14
|
v-model="internalValue"
|
|
15
15
|
:disable="disable"
|
|
16
|
-
:
|
|
16
|
+
:error-message="''"
|
|
17
17
|
:hint="field.description"
|
|
18
18
|
:errors="internalErrors"
|
|
19
|
+
@keydown="$emit('keydown', $event)"
|
|
20
|
+
@blur="$emit('blur', $event)"
|
|
19
21
|
outlined>
|
|
20
22
|
</q-input>
|
|
21
23
|
</div>
|
|
@@ -70,7 +72,9 @@ export default defineComponent({
|
|
|
70
72
|
|
|
71
73
|
emits: [
|
|
72
74
|
'update:modelValue',
|
|
73
|
-
'update:invalid'
|
|
75
|
+
'update:invalid',
|
|
76
|
+
'keydown',
|
|
77
|
+
'blur',
|
|
74
78
|
],
|
|
75
79
|
|
|
76
80
|
data() {
|
package/fields/NumberField.vue
CHANGED
|
@@ -13,8 +13,10 @@
|
|
|
13
13
|
:minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
|
|
14
14
|
v-model="internalValue"
|
|
15
15
|
:disable="disable"
|
|
16
|
-
:
|
|
16
|
+
:error-message="''"
|
|
17
17
|
:hint="field.description"
|
|
18
|
+
@keydown="$emit('keydown', $event)"
|
|
19
|
+
@blur="$emit('blur', $event)"
|
|
18
20
|
outlined>
|
|
19
21
|
</q-input>
|
|
20
22
|
</div>
|
|
@@ -56,12 +58,22 @@ export default defineComponent({
|
|
|
56
58
|
type: Boolean,
|
|
57
59
|
required: false,
|
|
58
60
|
default: true
|
|
61
|
+
},
|
|
62
|
+
validationPattern: {
|
|
63
|
+
type: RegExp,
|
|
64
|
+
required: false
|
|
65
|
+
},
|
|
66
|
+
validationPatternMessage: {
|
|
67
|
+
type: String,
|
|
68
|
+
required: false
|
|
59
69
|
}
|
|
60
70
|
},
|
|
61
71
|
|
|
62
72
|
emits: [
|
|
63
73
|
'update:modelValue',
|
|
64
|
-
'update:invalid'
|
|
74
|
+
'update:invalid',
|
|
75
|
+
'keydown',
|
|
76
|
+
'blur',
|
|
65
77
|
],
|
|
66
78
|
|
|
67
79
|
data() {
|
package/fields/TelField.vue
CHANGED
|
@@ -2,24 +2,41 @@
|
|
|
2
2
|
<div class="field-wrap" :id="id">
|
|
3
3
|
<div class="field-wrap-inner">
|
|
4
4
|
<q-input
|
|
5
|
-
:label="
|
|
5
|
+
:label="
|
|
6
|
+
showLabel
|
|
7
|
+
? field.label + (field.required ? ' *' : '')
|
|
8
|
+
: undefined
|
|
9
|
+
"
|
|
6
10
|
:name="field.name"
|
|
7
11
|
:id="id + '-input'"
|
|
8
12
|
:placeholder="field.placeholder"
|
|
9
13
|
type="tel"
|
|
10
14
|
class="field"
|
|
11
|
-
:class="{
|
|
15
|
+
:class="{
|
|
16
|
+
invalid: invalid && internalErrors && internalErrors.length,
|
|
17
|
+
}"
|
|
12
18
|
:maxlength="255"
|
|
13
19
|
v-model="internalValue"
|
|
14
20
|
:disable="disable"
|
|
15
|
-
:
|
|
21
|
+
:error-message="''"
|
|
16
22
|
:hint="field.description"
|
|
17
|
-
|
|
23
|
+
@keydown="$emit('keydown', $event)"
|
|
24
|
+
@blur="$emit('blur', $event)"
|
|
25
|
+
outlined
|
|
26
|
+
>
|
|
18
27
|
</q-input>
|
|
19
28
|
</div>
|
|
20
29
|
|
|
21
|
-
<div
|
|
22
|
-
|
|
30
|
+
<div
|
|
31
|
+
class="validation-errors"
|
|
32
|
+
v-if="invalid && internalErrors && internalErrors.length"
|
|
33
|
+
>
|
|
34
|
+
<span
|
|
35
|
+
class="error danger-txt-color"
|
|
36
|
+
v-for="(error, index) in internalErrors"
|
|
37
|
+
:key="index + 'error'"
|
|
38
|
+
>{{ error }}</span
|
|
39
|
+
>
|
|
23
40
|
</div>
|
|
24
41
|
</div>
|
|
25
42
|
</template>
|
|
@@ -31,7 +48,8 @@ import { ModelFieldDefinition } from '@westartcom/bread-quasar-fields/interfaces
|
|
|
31
48
|
import { FieldType } from '@westartcom/bread-quasar-fields/enums/FieldType';
|
|
32
49
|
import { InputType } from '@westartcom/bread-quasar-fields/enums/InputType';
|
|
33
50
|
|
|
34
|
-
interface TelFieldDefinition
|
|
51
|
+
interface TelFieldDefinition
|
|
52
|
+
extends ModelFieldDefinition<FieldType.TEXT, InputType.TEL> {
|
|
35
53
|
default: string | null;
|
|
36
54
|
}
|
|
37
55
|
|
|
@@ -39,102 +57,129 @@ export default defineComponent({
|
|
|
39
57
|
props: {
|
|
40
58
|
id: {
|
|
41
59
|
type: String,
|
|
42
|
-
required: true
|
|
60
|
+
required: true,
|
|
43
61
|
},
|
|
44
62
|
disable: {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
63
|
+
type: Boolean,
|
|
64
|
+
required: false,
|
|
65
|
+
default: false,
|
|
48
66
|
},
|
|
49
67
|
field: {
|
|
50
68
|
type: Object as PropType<TelFieldDefinition>,
|
|
51
|
-
required: true
|
|
69
|
+
required: true,
|
|
52
70
|
},
|
|
53
71
|
modelValue: String,
|
|
54
72
|
errors: Array as PropType<string[]>,
|
|
55
73
|
showLabel: {
|
|
56
74
|
type: Boolean,
|
|
57
75
|
required: false,
|
|
58
|
-
default: true
|
|
59
|
-
}
|
|
76
|
+
default: true,
|
|
77
|
+
},
|
|
78
|
+
validationPattern: {
|
|
79
|
+
type: RegExp,
|
|
80
|
+
required: false,
|
|
81
|
+
},
|
|
82
|
+
validationPatternMessage: {
|
|
83
|
+
type: String,
|
|
84
|
+
required: false,
|
|
85
|
+
},
|
|
60
86
|
},
|
|
61
87
|
|
|
62
|
-
emits: [
|
|
63
|
-
'update:modelValue',
|
|
64
|
-
'update:invalid'
|
|
65
|
-
],
|
|
88
|
+
emits: ['update:modelValue', 'update:invalid', 'keydown', 'blur'],
|
|
66
89
|
|
|
67
90
|
data() {
|
|
68
91
|
return {
|
|
69
92
|
invalid: null as boolean | null,
|
|
70
93
|
internalValue: null as E164Number | null,
|
|
71
|
-
internalErrors: [] as string[]
|
|
94
|
+
internalErrors: [] as string[],
|
|
72
95
|
};
|
|
73
96
|
},
|
|
74
97
|
|
|
75
98
|
mounted() {
|
|
76
99
|
if (this.modelValue) {
|
|
77
100
|
let phoneNumber = parsePhoneNumberFromString(this.modelValue);
|
|
78
|
-
this.internalValue =
|
|
101
|
+
this.internalValue = phoneNumber ? phoneNumber.number : null;
|
|
79
102
|
} else if (this.field.default) {
|
|
80
103
|
let phoneNumber = parsePhoneNumberFromString(this.field.default);
|
|
81
|
-
this.internalValue =
|
|
104
|
+
this.internalValue = phoneNumber ? phoneNumber.number : null;
|
|
82
105
|
}
|
|
83
106
|
|
|
84
107
|
this.validate(this.internalValue);
|
|
85
108
|
},
|
|
86
109
|
|
|
87
110
|
watch: {
|
|
88
|
-
modelValue: function(val) {
|
|
111
|
+
modelValue: function (val) {
|
|
89
112
|
if (val !== this.internalValue) {
|
|
90
113
|
this.internalValue = val;
|
|
91
114
|
}
|
|
92
115
|
},
|
|
93
116
|
|
|
94
|
-
internalValue: function(val) {
|
|
117
|
+
internalValue: function (val) {
|
|
118
|
+
if (this.validationPattern) {
|
|
119
|
+
const pattern = new RegExp(this.validationPattern);
|
|
120
|
+
this.internalErrors = [];
|
|
121
|
+
if (!pattern.test(val)) {
|
|
122
|
+
this.internalErrors.push(
|
|
123
|
+
this.validationPatternMessage
|
|
124
|
+
? this.validationPatternMessage
|
|
125
|
+
: 'Invalid format'
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
95
129
|
this.validate(val);
|
|
96
130
|
|
|
97
|
-
let phoneNumber =
|
|
98
|
-
|
|
131
|
+
let phoneNumber =
|
|
132
|
+
val && typeof val === 'string'
|
|
133
|
+
? parsePhoneNumberFromString(val)
|
|
134
|
+
: null;
|
|
135
|
+
this.$emit(
|
|
136
|
+
'update:modelValue',
|
|
137
|
+
phoneNumber ? phoneNumber.number : val
|
|
138
|
+
);
|
|
99
139
|
},
|
|
100
140
|
|
|
101
141
|
errors: {
|
|
102
|
-
handler: function(val) {
|
|
142
|
+
handler: function (val) {
|
|
103
143
|
this.internalErrors = val;
|
|
104
144
|
},
|
|
105
|
-
deep: true
|
|
145
|
+
deep: true,
|
|
106
146
|
},
|
|
107
147
|
|
|
108
148
|
internalErrors: {
|
|
109
|
-
handler: function(val) {
|
|
149
|
+
handler: function (val) {
|
|
110
150
|
this.invalid = !!(val && val.length);
|
|
111
151
|
},
|
|
112
|
-
deep: true
|
|
152
|
+
deep: true,
|
|
113
153
|
},
|
|
114
154
|
|
|
115
|
-
invalid: function(val) {
|
|
155
|
+
invalid: function (val) {
|
|
116
156
|
this.$emit('update:invalid', val);
|
|
117
|
-
}
|
|
157
|
+
},
|
|
118
158
|
},
|
|
119
159
|
|
|
120
160
|
methods: {
|
|
121
|
-
validate: function(val) {
|
|
161
|
+
validate: function (val) {
|
|
122
162
|
if (this.field.required && !val) {
|
|
123
163
|
this.invalid = true;
|
|
124
164
|
} else {
|
|
125
|
-
const phoneNumber =
|
|
165
|
+
const phoneNumber =
|
|
166
|
+
val && typeof val === 'string'
|
|
167
|
+
? parsePhoneNumberFromString(val)
|
|
168
|
+
: null;
|
|
126
169
|
this.internalErrors = [];
|
|
127
|
-
this.invalid =
|
|
170
|
+
this.invalid = val && !(phoneNumber && phoneNumber.isValid());
|
|
128
171
|
|
|
129
172
|
if (this.invalid) {
|
|
130
|
-
this.internalErrors.push(
|
|
173
|
+
this.internalErrors.push(
|
|
174
|
+
this.$i18n.get('validation.phone', {
|
|
175
|
+
attribute: this.field.label,
|
|
176
|
+
})
|
|
177
|
+
);
|
|
131
178
|
}
|
|
132
179
|
}
|
|
133
|
-
}
|
|
134
|
-
}
|
|
180
|
+
},
|
|
181
|
+
},
|
|
135
182
|
});
|
|
136
183
|
</script>
|
|
137
184
|
|
|
138
|
-
<style scoped lang="scss">
|
|
139
|
-
|
|
140
|
-
</style>
|
|
185
|
+
<style scoped lang="scss"></style>
|
package/fields/TextField.vue
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
:label="(showLabel) ? field.label + ((field.required) ? ' *' : '') : undefined"
|
|
6
6
|
:name="field.name"
|
|
7
7
|
:id="id + '-input'"
|
|
8
|
+
:loading="loading"
|
|
8
9
|
:placeholder="field.placeholder"
|
|
9
10
|
type="text"
|
|
10
11
|
class="field"
|
|
@@ -13,8 +14,10 @@
|
|
|
13
14
|
:minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
|
|
14
15
|
v-model="internalValue"
|
|
15
16
|
:disable="disable"
|
|
16
|
-
:
|
|
17
|
+
:error-message="''"
|
|
17
18
|
:hint="field.description"
|
|
19
|
+
@keydown="$emit('keydown', $event)"
|
|
20
|
+
@blur="$emit('blur', $event)"
|
|
18
21
|
outlined>
|
|
19
22
|
</q-input>
|
|
20
23
|
</div>
|
|
@@ -68,12 +71,19 @@ export default defineComponent({
|
|
|
68
71
|
validationPatternMessage: {
|
|
69
72
|
type: String,
|
|
70
73
|
required: false
|
|
74
|
+
},
|
|
75
|
+
loading: {
|
|
76
|
+
type: Boolean,
|
|
77
|
+
required: false,
|
|
78
|
+
default: false
|
|
71
79
|
}
|
|
72
80
|
},
|
|
73
81
|
|
|
74
82
|
emits: [
|
|
75
83
|
'update:modelValue',
|
|
76
|
-
'update:invalid'
|
|
84
|
+
'update:invalid',
|
|
85
|
+
'keydown',
|
|
86
|
+
'blur',
|
|
77
87
|
],
|
|
78
88
|
|
|
79
89
|
data() {
|
package/fields/TextareaField.vue
CHANGED
|
@@ -13,8 +13,10 @@
|
|
|
13
13
|
:minlength="(field.extra_data && field.extra_data.min) ? field.extra_data.min : null"
|
|
14
14
|
v-model="internalValue"
|
|
15
15
|
:disable="disable"
|
|
16
|
-
:
|
|
16
|
+
:error-message="''"
|
|
17
17
|
:hint="field.description"
|
|
18
|
+
@keydown="$emit('keydown', $event)"
|
|
19
|
+
@blur="$emit('blur', $event)"
|
|
18
20
|
outlined>
|
|
19
21
|
</q-input>
|
|
20
22
|
</div>
|
|
@@ -62,12 +64,22 @@ export default defineComponent({
|
|
|
62
64
|
type: Boolean,
|
|
63
65
|
required: false,
|
|
64
66
|
default: true
|
|
67
|
+
},
|
|
68
|
+
validationPattern: {
|
|
69
|
+
type: RegExp,
|
|
70
|
+
required: false
|
|
71
|
+
},
|
|
72
|
+
validationPatternMessage: {
|
|
73
|
+
type: String,
|
|
74
|
+
required: false
|
|
65
75
|
}
|
|
66
76
|
},
|
|
67
77
|
|
|
68
78
|
emits: [
|
|
69
79
|
'update:modelValue',
|
|
70
|
-
'update:invalid'
|
|
80
|
+
'update:invalid',
|
|
81
|
+
'keydown',
|
|
82
|
+
'blur',
|
|
71
83
|
],
|
|
72
84
|
|
|
73
85
|
data() {
|
|
@@ -96,6 +108,13 @@ export default defineComponent({
|
|
|
96
108
|
},
|
|
97
109
|
|
|
98
110
|
internalValue: function(val) {
|
|
111
|
+
if(this.validationPattern) {
|
|
112
|
+
const pattern = new RegExp(this.validationPattern);
|
|
113
|
+
this.internalErrors = [];
|
|
114
|
+
if (!pattern.test(val)) {
|
|
115
|
+
this.internalErrors.push((this.validationPatternMessage) ? this.validationPatternMessage : 'Invalid format');
|
|
116
|
+
}
|
|
117
|
+
}
|
|
99
118
|
this.validate(val);
|
|
100
119
|
this.$emit('update:modelValue', val);
|
|
101
120
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@westartcom/bread-quasar-fields",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "Quasar compatible fields for bread package",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -10,18 +10,18 @@
|
|
|
10
10
|
"author": "Christoffer",
|
|
11
11
|
"license": "ISC",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"vue": "^3.4.14",
|
|
14
13
|
"@quasar/extras": "^1.16.3",
|
|
15
|
-
"quasar": "^2.12.0",
|
|
16
|
-
"axios": "^1.6.5",
|
|
17
|
-
"luxon": "^3.4.4",
|
|
18
|
-
"moment": "^2.30.1",
|
|
19
|
-
"lodash-es": "^4.17.21",
|
|
20
|
-
"libphonenumber-js": "^1.9.19",
|
|
21
14
|
"@tiptap/core": "^2.0.3",
|
|
22
15
|
"@tiptap/html": "^2.0.3",
|
|
23
16
|
"@tiptap/starter-kit": "^2.0.3",
|
|
24
|
-
"@tiptap/vue-3": "^2.0.3"
|
|
17
|
+
"@tiptap/vue-3": "^2.0.3",
|
|
18
|
+
"axios": "^1.6.5",
|
|
19
|
+
"libphonenumber-js": "^1.9.19",
|
|
20
|
+
"lodash-es": "^4.17.21",
|
|
21
|
+
"luxon": "^3.4.4",
|
|
22
|
+
"moment": "^2.30.1",
|
|
23
|
+
"quasar": "^2.12.0",
|
|
24
|
+
"vue": "^3.4.14"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@types/lodash-es": "^4.17.6",
|